集合Bootstrap自定义confirm提示效果
更新时间:2017年09月19日 16:43:20 作者:sunnylinner
这篇文章主要为大家详细介绍了集合Bootstrap自定义confirm提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了集合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 { ........ } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
js动态添加input按钮并给按钮增加onclick的函数事件(带参数)完整实例
这篇文章主要介绍了js动态添加input按钮并给按钮增加onclick的函数事件,结合完整实例形式分析了javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2023-07-07JavaScript中promise.all和promise.race的区别详解
Promise.all和Promise.race是JavaScript的两种Promise处理方法,Promise.all要求所有Promise对象成功完成才返回成功,若有一个失败则整体失败,Promise.race返回第一个完成的Promise结果,需要的朋友可以参考下2024-09-09
最新评论