最近使用了了bootstrap的模态框，再使用jquery-ui的dialog对window的自带alert提示框封装使用，发现报栈溢出，因为jquery和jquery-ui都有个focus()方法，可能导致递归后栈溢出。
于是决定自己写个提示框的方法，效果图如下：
代码：
/*css部分*/<style>.msg-bg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: #000;opacity: .4;z-index: 1050;}.msg-alert {position: absolute;top: 50%;left: 50%;background: #fff;border: 1px solid #eee;border-top: 3px solid #2d83ea;width: 400px;transform: translate(-50%,-50%);z-index: 1051;}.msg-header,.msg-body{border-bottom: 1px solid #eee;padding: 15px;}.msg-content {padding: 15px;}.msg-dismiss {cursor: pointer;background: transparent;float: right;border: 0;line-height: 1;font-size: 22px;color: #aaa;margin-top: -2px;}.msg-dismiss:hover {color: #bc1b1b;}.msg-footer {padding: 8px;text-align: right;}.msg-footer .msg-btnOk {background-color: #2f83ea;border: 1px solid #2f83ea;color: #fff;padding: 5px 15px;}.msg-footer .msg-btnOk:hover {background-color:#3f94fc;}.msg-title {margin: 0;}/*自制提示框 end*/</style>/*javascript部分*/function alertMsg(text) {var bgHtml ="<div class='msg-bg'></div>";var msgAlertHtml = "<div class='msg-alertWrap'>" +"<div class='msg-alert'>" +"<div class='msg-header'><button class='msg-dismiss'><span>×</span></button><h4 class='msg-title'>温馨提示</h4></div>" +"<div class='msg-body'>" +"<div class='msg-content'></div>" +"</div>" +"<div class='msg-footer'>" +"<button type='button' class='msg-btnOk'>确定</button>" +"</div>" +"</div>"+"</div>";if ($(".msg-bg").length == 0) {$("body").append(bgHtml + msgAlertHtml);} else {$("body").append(msgAlertHtml);}$(".msg-alertWrap:last-child .msg-content").html(text);$(".msg-btnOk,.msg-dismiss").on("click", function () {$(this).parents(".msg-alertWrap").remove();if ($(".msg-alertWrap").length == 0) {$(".msg-bg").remove();}})}
调用方法：
alertMsg(“你好”);
而且可以调用多次。
