版权声明：本文为博主原创文章，转载请注明出处！ https://blog.csdn.net/chuangxin/article/details/87896598
浏览器window对象的alert, confirm和prompt方法分别可以实现信息提示框框、yes|no选择框和输入框。由于浏览器的差异性，同是prompt输入提示框，不同浏览器显示不尽相同，因此很多UI框架都有其自己的Dialog实现，用以模拟window对象的alert等提示框。本文基于BootStrap modal组件，模拟了window对象的alert等提示框。
1、页面截图
alert框，对应按钮：alert()
info框，对应按钮：info()
warn框，对应按钮：warn()
error框，对应按钮：error()
confirm框，对应按钮：confirm()
prompt框 input输入框，对应按钮：prompt-input
prompt框 textarea输入框，对应按钮：prompt-textarea
2、页面HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>LyDialog</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-header, .modal-footer{padding-top: 8px; padding-bottom: 8px}
.modal-title{font-size: 14px;}
.modal-header .close{font-size: 14px; margin-top: 0px; }
.msg {font-size: 14px; line-height: 18px;}
.msg .icon{vertical-align: top; font-size: 14px; line-height: 18px}
.msg-info .icon{color:#427fed;}
.msg-warn .icon{color:#f4b400;}
.msg-error .icon{color:#da411f;}
</style>
</head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
<button type="button" class="btn btn-sm" onclick="alert()">alert()</button>
<button type="button" class="btn btn-sm" onclick="info()">info()</button>
<button type="button" class="btn btn-sm" onclick="warn()">warn()</button>
<button type="button" class="btn btn-sm" onclick="error()">error()</button>
<button type="button" class="btn btn-sm" onclick="confirm()">confirm()</button>
<button type="button" class="btn btn-sm" onclick="prompt1()">prompt-input</button>
<button type="button" class="btn btn-sm" onclick="prompt2()">prompt-textarea</button>
</div><!-- page-head -->
</div>
<script type="text/javascript">
function alert() { LyDialog.alert({msg: '这是个Alert框.'}); }
function info() { LyDialog.info({msg: '这是个Info框.'});}
function warn() { LyDialog.warn({msg: '这是个Warn框.'}); }
function error() { LyDialog.error({msg: '这是个Error框.'});}
function confirm() {
LyDialog.confirm({msg: "确实要退出系统吗?", onOk: function() {
console.log("confirm: onOk");
}, onCancel: function(){
console.log("confirm: onCancel");
}})
}
function prompt1() {
LyDialog.prompt({msg: "请输入sid：(多个sid用英文逗号分隔)", onOk: function(val) {
console.log("prompt: onOk, ", val);
}, onCancel: function(){
console.log("prompt: onCancel");
}})
}
function prompt2() {
LyDialog.prompt({msg: "请输入意见反馈：", rows:2, onOk: function(val) {
console.log("prompt: onOk, ", val);
}, onCancel: function(){
console.log("prompt: onCancel");
}})
}
var LyDialog = (function($) {
var _html = function() {/*
<div id="ly-dialog" class="modal modal-primary ly-dialog" tabindex="-1">
<div class="modal-dialog" style="width:400px;">
<div class="modal-content">
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
<h4 class="modal-title font-14">{title}</h4>
</div>
<div class="modal-body">
{msg}
</div>
<div class="modal-footer">
<button id="lydialog-btncancel" type="button" class="btn btn-warning btn-xs" data-dismiss="modal">取消</button>
<button id="lydialog-btnok" type="button" class="btn btn-primary btn-xs">确定</button>
</div>
</div>
</div>
</div>
*/};
var _msgTypes = {
info:"glyphicon glyphicon-info-sign",
warn:"glyphicon glyphicon-warning-sign",
error:"glyphicon glyphicon-remove-sign"};
var _format = function() {
if(arguments.length == 0) return null;
var str = arguments[0], a = arguments.length > 1 ? arguments[1] : null;
for(var i=1;i<arguments.length;i++) {
var re = new RegExp('\\{' + (i-1) + '\\}','gm');
str = str.replace(re, arguments[i]);
}
return str;
};
var _show = function(o) {
var _opts = {type: 'alert', msg: '请设置内容!', icon: 'info', val: '', rows: 1};
o = $.extend({}, _opts, o);
_init(o);
var _title = o.title, _body = o.msg, _openarg = {backdrop: 'static'}, $lydialog = $("#ly-dialog");
switch(o.type) {
case 'alert':
if(_title === undefined) _title = '信息';
_body = _format("<div class='msg msg-{0} clearfix'><span class='icon {1} fl' style='font-size:18px; margin-right:6px'></span>{2}</div>",
o.icon, _msgTypes[o.icon], o.msg);
$("#lydialog-btncancel").hide();
break;
case 'confirm':
if(_title === undefined) _title = '提示框';
$("#lydialog-btncancel").show();
break;
case 'prompt':
console.log("afdf")
if(_title === undefined) _title = '';
_body = _format("<label class='c-999'>{0}</label>", o.msg);
if(o.rows > 1) {
_body += _format("<textarea id='lydialog-input' class='form-control input-sm' value='{0}' onfocus='this.select();' rows={1} style='resize:none;'></textarea>", o.val, o.rows);
} else {
_body += _format("<input id='lydialog-input' class='form-control input-sm' value='{0}' onfocus='this.select();'>", o.val);
}
$("#lydialog-btncancel").show();
break;
}
_title = _title || '';
if(_title == '') {
$lydialog.find(".modal-header").hide();
}else{
$lydialog.find(".modal-header").show(); $lydialog.find(".modal-title").html(_title);
}
$lydialog.find(".modal-body").html(_body);
$lydialog.modal(_openarg);
},
_confirm = function(o) { _show($.extend(_types.confirm, o));},
_prompt = function(o) {_show($.extend(_types.prompt, o));},
_init = function(o) {
if($("#ly-dialog").length == 0) {
var _strhtml = _html.toString(), _reg = /\/\*([\s\S]*)\*\//gm, _rst = _reg.exec(_strhtml);
$(document.body).append(_rst[1]);
}
$("#lydialog-btnok").off("click").on("click", function(e){
$("#ly-dialog").modal('hide');
if(o.onOk) o.onOk($("#lydialog-input").val());
});
$("#lydialog-btncancel").off("click").on("click", function(e){
$("#ly-dialog").modal('hide');
if(o.onCancel) o.onCancel();
});
};
//
return {
alert: _show,
info: _show,
warn: function(o) {o = o || {}, o.title = '警告', o.icon = 'warn', _show(o);},
error: function(o) {o = o || {}, o.title = '错误', o.icon = 'error', _show(o);},
confirm: function(o) {o = o || {}, o.type = 'confirm', _show(o);},
prompt: function(o) {o = o || {}, o.type = 'prompt', _show(o);},
};
})(jQuery);
</script>
</body>
</html>
3、代码说明
1）函数名.toString()获取函数定义
var _strhtml = _html.toString(); // function(){ /*...*/ }
2）正则表达式运用，获取函数注释 斜杠星号 之间的字符串
var _strhtml = _html.toString(), _reg = /\/\*([\s\S]*)\*\//gm, _rst = _reg.exec(_strhtml);
$(document.body).append(_rst[1]);
3）bootstrap modal组件使用
$lydialog.modal({backdrop: 'static'});
$("#ly-dialog").modal('hide');
4）立即调用的函数表达式
var LyDialog = (function($) { ... })(jQuery);