基于bootstrap的模态框的comfirm弹窗
2016-12-26 15:31
447 查看
完成的效果如下:
html代码如下:
js代码如下:
html代码如下:
<button id="btn">点击弹出弹框</button> <!-- 弹出框 --> <div class="modal fade" id="confirm_like" tabindex="-1"> <!-- 窗口声明 --> <div class="modal-dialog modal-sm"> <!-- 内容声明 --> <div class="modal-content"> <div class="modal-header" style="padding-top: 10px; padding-bottom: 10px;"> <button class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body"> <div id="modal_con" style="text-align: center;"></div> <div id="firstDiv"></div> </div> <div class="modal-footer" style="text-align: center; padding-top: 10px; padding-bottom: 10px;margin-top:0;"> <button class="btn btn-sm btn-success" data-dismiss="modal" id="ok_btn">确 定</button> <button class="btn btn-sm btn-success" data-dismiss="modal" id="cancel_btn">取 消</button> </div> </div> </div> </div>
js代码如下:
$("#btn").click(function(){ //调用 show_confirm('提示', '数据提交中',certain,cancel); }); //显示弹窗函数 function show_confirm(title, msg ,ok_callback,cancel_callback) { $("#isConfirm").val('false'); $("#myModalLabel").text(title);//这里设置弹窗的标头 $("#modal_con").text(msg);//设置提示的信息 $("#confirm_like").modal({//显示弹窗 show : true, //backdrop : true,去掉遮罩层 }); //确定按钮事件函数 $("#ok_btn").click(function(){ if($.isFunction(ok_callback)){ $('#confirm_like').off('hidden.bs.modal'); //解绑事件,防止多次绑定 $('#confirm_like').on('hidden.bs.modal', function(){ok_callback("这是确定");}); } }); //取消按钮事件函数 $("#cancel_btn").click(function(){ if($.isFunction(cancel_callback)){ $('#confirm_like').off('hidden.bs.modal'); $('#confirm_like').on('hidden.bs.modal', function(){cancel_callback();}); } }); //弹窗的关闭按钮事件函数 $("#confirm_like .close").click(function(){ if($.isFunction(cancel_callback)){ $('#confirm_like').off('hidden.bs.modal'); $('#confirm_like').on('hidden.bs.modal', function(){cancel_callback();}); } }); } function certain(str){ alert(str); } function cancel(){ alert("这是取消"); }
相关文章推荐
- 基于jquery-ui及bootstrap的可拖拽模态框
- 基于JQuery 改造bootstrap模态框拖动功能
- 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
- bootstrap的模态弹窗 和CKEditor的模态弹窗冲突问题解决
- Bootstrap 多弹窗(模态窗),第二层覆盖前一层解决办法
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器 点击关闭弹窗 出现第二次无法加载的问题
- Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog
- 基于bootstrap 模态框的警告框
- bootstrap模态框弹窗导致页面左移
- Bootstrap 模态弹窗
- BootStrap modal模态弹窗使用小结
- 基于Bootstrap表单验证功能
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
- BootStrap模态框闪退
- js实现类bootstrap模态框动画
- C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- 基于Bootstrap简洁的后台UI框架
- 阻止Bootstrap 模态框在点击页面空白处关闭方法
- bootstrap模态框消失问题的解决方法