首页 > 编程 > JavaScript > 正文

集合Bootstrap自定义confirm提示效果

2019-11-19 15:22:59
字体:
来源:转载
供稿:网友

本文实例为大家分享了集合Bootstrap自定义confirm的具体代码,供大家参考,具体内容如下

效果

这里写图片描述

js端

var Common = {  confirm:function(params){    var model = $("#common_confirm_model");    model.find(".title").html(params.title)    model.find(".message").html(params.message)    $("#common_confirm_btn").click()    //每次都将监听先关闭,防止多次监听发生,确保只有一次监听    model.find(".cancel").die("click")    model.find(".ok").die("click")    model.find(".ok").live("click",function(){      params.operate(true)    })    model.find(".cancel").live("click",function(){      params.operate(false)    })  }}

html端

<input type="hidden" id="common_confirm_btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#common_confirm_model"><div id="common_confirm_model" class="modal">  <div class="modal-dialog modal-sm">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal">    <span aria-hidden="true">×</span>    <span class="sr-only">Close</span></button>        <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i>        <span class="title"></span>    </h5>      </div>      <div class="modal-body small">        <p ><span class="message"></span></p>      </div>      <div class="modal-footer" >        <button type="button" class="btn btn-primary ok" data-dismiss="modal">确认</button>        <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>      </div>    </div>  </div></div>

调用

Common.confirm({   title: "标题",   message: "内容",   operate: function (reselt) {     if (reselt) {       ........     } else {       ........     }   } })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表