集合Bootstrap自定义confirm
首先
$(function(){...}) 是 $(document).ready(function(){...}) 的简写形式
页面载入后执行花括号中的 js
Common js
//页面载入后执行 $(function() { Common = { confirm:function(params){ var model = $("#common_confirm_model"); model.find(".title").html(params.title); model.find(".message").html(params.message); //每次都将监听先关闭,防止多次监听发生,确保只有一次监听 model.find(".cancel").off("click"); model.find(".ok").off("click"); model.find(".ok").on("click",function(){ params.operate(true) }); model.find(".cancel").on("click",function(){ params.operate(false) }); } }; });
自定义弹层(html)
<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>
触发、调用 js
$(function(){ $('.status_confirm').on('click', function(){ $word = $(this).attr('data-word'); $href = $(this).attr('data-href'); Common.confirm({ title: "状态修改", message: "是否" + $word, operate: function (result) { if (result) { window.location = $href; } else { console.log('false'); } } }) }); });
FYI:http://shaojinjie.com/2015/11/18/%E9%9B%86%E5%90%88Bootstrap%E8%87%AA%E5%AE%9A%E4%B9%89confirm/
打赏: 微信
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
前端弹窗插件可以试试Layer.js,封装一下很好用。
@Secret:好嘞,有空整blog的时候再搞吧 ^-^