完成的效果如下:
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("这是取消"); }
时间: 2024-12-28 20:36:05