modal
bootstrap的模态框已经设计的非常好了，但是它没有提供函数试的方法调用（类似于原始的alert、confirm），我很懒，我喜欢原始alert的方便，但是不喜欢其样式，所以把两者结合起来简单封装了一下。参考文档：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
关闭弹框
modal('toggle');
modal('hide)
demo
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>bootstrap弹框</title>
<linkhref="files/bootstrap.css"rel="stylesheet">
<scriptsrc="files/jquery-2.1.0.min.js"></script>
<scriptsrc="files/bootstrap.min.js"></script>
</head>
<body>
<buttonclass="btn btn-primarybtn-lg"οnclick="testAlert()">alert</button>
<buttonclass="btn btn-primarybtn-lg"οnclick="testConfirm()">confirm</button>
</body>
<script>
function testAlert() {
MyKit.alert('确定吗？');
}
function testConfirm() {
MyKit.confirm('确定吗？',function() {
MyKit.alert('您点击了确定')
});
}
var MyKit= {
systemMessage : '系统提示',
/**
* 空函数，只是用于拼接参数
*/
defaultFn : function() {},
/**
* 确认框
*
* @param message 提示语
* @param okCallbace 回调函数，用户点击确定按钮后执行。如果不配置，默认是关闭弹框。
* @param noCallback 回调函数，用户点击取消按钮后执行。如果不配置，默认是关闭弹框。
*/
confirm : function(message, okCallback, noCallback) {
if (undefined== noCallback) {
noCallback = MyKit.defaultFn;
}
MyKit.simpleDialog(message, okCallback, noCallback);
},
/**
* 提示框
*
* @param message 提示语
* @param okCallbace 回调函数，用户点击确定按钮后执行。如果不配置，默认是关闭弹框。
*/
alert : function(message, okCallback) {
MyKit.simpleDialog(message, okCallback);
},
/**
* 弹框，如：simpleDialog(
* '测试消息',
* function() {alert('您点击了确定')},
* function() {alert('您点击了取消')}
* );
*
* @param message 提示语
* @param okCallback 函数，用户点击了确定按钮要执行
* @param noCallback 函数，用户点击了取消按钮要执行
*/
simpleDialog : function(message, okCallback, noCallback) {
var myACmodal=$('#myACmodal');
if (undefined== myACmodal[0]) {
var content= '<div class="modal fade"id="myACmodal" tabindex="-1" role="dialog"'+
' aria-labelledby="myModalLabel"aria-hidden="true">';
content += '<div class="modal-dialog">';
content += '<div class="modal-content">';
content += '<div class="modal-header">';
content += '<h4 class="modal-title">'+ MyKit.systemMessage+ '</h4>';
content += '</div>';
content += '<div id="myACbody"class="modal-body" style="font-size: 150%;">'+ message + '</div>';
content += '<div class="modal-footer">';
content += '<button type="button"id="myACsureBtn" class="btn btn-warning ui-button">确定</button>';
content += '<button type="button"id="myACcloseBtn" class="btn btn-primary ui-button"'+
' style="display: none;">取消</button>';
content += '</div></div></div></div>';
$('body').after(content);
myACmodal = $('#myACmodal');
} else {
$('#myACcloseBtn').hide();// 初始化取消按钮
$('#myACbody').html(message);
}
myACmodal.modal({
backdrop : 'static',
keyboard : false
});
$('#myACsureBtn').unbind('click').bind('click',function() {
myACmodal.modal('hide');
myACmodal.on('hidden.bs.modal',function() {
if (undefined!= okCallback) {
okCallback();
// 清空赋值是必须的，防止alert里面套alert出现是循环
okCallback = undefined;
}
})
});
// 取消按钮给定的毁掉函数不为空，才显示该按钮
if (undefined!= noCallback) {
var btn= $('#myACcloseBtn');
btn.show();
btn.unbind('click').bind('click',function() {
myACmodal.modal('hide');
noCallback();
noCallback = undefined;
});
}
}
};
</script>
</html>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
