集合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的时候再搞吧 ^-^