首先
(function(){...}) 是 (document).ready(function(){...}) 的简写形式 页面载入后执行花括号中的 js
Common js
代码语言:javascript复制//页面载入后执行
$(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)
代码语言:javascript复制<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
代码语言:javascript复制$(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/集合Bootstrap自定义confirm/