1:最基本的alert 提示
2:将带有样式的一个框弹出来
在common.js中写共用的弹出方法 将一个div弹出 参数是 提示信息 是否刷新
function ShowMsgBox(message, IsRefresh) {
$("#divMsgBoard").html(message);
$("#divBg").show();
$("#divMsgBox").show();
if (IsRefresh != "false")
$("#divMsgBox").attr("refresh", "refresh");
}
function ShowMsgBox(message, IsRefresh, url) {
$("#divMsgBoard").html(message);
$("#divBg").show();
$("#divMsgBox").show();
if (IsRefresh != "false") {
$("#divMsgBox").attr("refresh", "refresh");
$("#divMsgBox").attr("urlNew", url);
}
}
function HideMsgBox() {
$("#divMsgBoard").html("");
$("#divBg").hide();
$("#divMsgBox").hide();
var refresh = $("#divMsgBox").attr("refresh");
if (refresh == "refresh") {
var urlNew = $("#divMsgBox").attr("urlNew");
if (urlNew != "No")
window.location.href = urlNew;
else
location.reload();
}
}
function CloseMsgBox() {
$("#divMsgBoard").html("");
$("#divBg").hide();
$("#divMsgBox").hide();
}
div 的结构
<div id="divBg"></div>
<div id="divMsgBox" refresh="false" urlnew="No">
<div class="msgBoxTitle">
<div class="caption">Peony Tours <button type="button" class="close" οnclick="CloseMsgBox()"></button></div>
<div class="tools"></div>
</div>
<div id="divMsgBoard">
</div>
<div style="text-align:center; margin-top:80px; margin-bottom:40px;">
<input type="button" value="Return" class="btn green" οnclick="HideMsgBox();" style=" padding: 8px 54px;" />
</div>
</div>
样式
#divMsgBox {
display: none;
position: fixed;
top: 40%;
left: 50%;
width: 30%;
height: 35%;
font-size: 18px;
border: 8px solid #E8E9F7;
background-color: white;
z-index: 1999;
overflow: auto;
transform: translate(-50%,-50%);
}
#divMsgBoard {
text-align: center;
margin-top: 30px;
vertical-align: middle;
font-size: 22px;
}
#divBg {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 99;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}