JQuery+bootstrap 模态框，alert、confirm、tip示例
2020-6-5 dingshangchao JavaScript
<html>
<head>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!-- system modal start -->
<div id="com-alert" class="modal" style="z-index:9999;display: none;" >
<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> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>
<!-- system modal end -->
</body>
</html>
<script>
/**
* 显示提示消息（自动关闭）
* @param msg
* @param sec 显示时间（毫秒）
* @param callback 回调函数
*/
function showTip(msg, sec, callback){
if(!sec) {
sec = 1000;
}
Modal.tip({
title:'提示',
msg: msg
}, sec);
setTimeout(callback, sec);
}
/**
* 显示消息
* @param msg
*/
function showMsg(msg, callback){
Modal.alert({
title:'提示',
msg: msg,
btnok: '确定'
}).on(function (e) {
if(callback){
callback();
}
});
}
/**
* 模态对话框
* @param msg
* @returns
*/
function showConfirm(msg,callback){
//var res = false;
Modal.confirm(
{
title:'提示',
msg: msg,
}).on( function (e) {
callback();
//res=true;
});
//return res;
}
/***
* 模态框封装
*/
$(function () {
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#com-alert");
var ahtml = alr.html();
var _tip = function (options, sec) {
alr.html(ahtml); // 复原
alr.find('.ok').hide();
alr.find('.cancel').hide();
alr.find('.modal-content').width(500);
_dialog(options, sec);
return {
on: function (callback) {
}
};
};
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { return; });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 250,
backdrop: 'static'
});
}
return {
tip: _tip,
alert: _alert,
confirm: _confirm
}
}();
});
</script>
调用
showTip("haha", 1000, function() {});
showMsg("haha", function() {});
showConfirm("haha", function() {});
« 显示---视口
|
js reduce方法»