最近使用了了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(“你好”);
而且可以调用多次。