<link href="css/style.css" rel="stylesheet" type="text/css" />
style.css文件: .outdiv{position: absolute;display: none;text-align: center;z-index:100; padding: 5px;min-width:400px;max-width:650px;}
/* left: 230px;top:50px;*/
.outdiv .cnt{ position: relative; z-index: 10; background-color: #fff; border: 1px #000 solid;}
.outdiv .cnt .title1{ height: 30px; line-height: 30px; background-color: #f7f7f7; padding-left: 1em; font-size: 14px;color:#000000;font-size:15px; font-weight:bold;}
.outdiv .close{ display: block; z-index: 10; background: url(../Images/close.png) no-repeat; width: 17px; height: 16px; top: 0px; right: 0px; position: absolute;}
.outdiv .close1{ display: block; z-index: 10; background: url(../Images/close1.png) no-repeat; width: 20px; height: 20px; top: 0px; right: 0px; position: absolute;}
.outdiv .cnt .tip-mainBox{ min-height:300px;text-align:center;max-height:350px;overflow:auto;vertical-align:middle;}
.outdiv .tip-mainBox table{margin:0 auto}
.title1{background:url(../Images/bj_t.png) repeat-x; border:0px;}
.outdiv .action{ padding-top: 15px; height: 50px; background-color: #f6f6f6;}
. outdiv .bg1{ width: 100%; height: 100%; z-index: 1; opacity: 0.8; background-color: #333; filter:alpha(opacity=80); position: absolute; top: 0; left: 0;}
.outdiv table td{text-align:left;}(样式中的图片没有文件)
弹出的层: <div id="div_title" class="outdiv" style="width: 610px;">
<div class="bg1">
</div>
<div class="cnt">
<a href="javascript:void(0);" οnclick="hideOverlay();$('#tijiao').css('display','none');" class="close"></a>
<div class="title1">
<span id="title_span"></span>
</div>
<div class="tip-mainBox" style="height:350px;">
<br />
<span id="ClassDetail_Span" style="text-align:left"></span>
<br />
</div>
</div>
</div>
js代码:<script type="text/javascript">
//遮罩效果
$("#div_title").overlay({
mask: {
color: '#000',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
onBeforeClose: function () {
// $('#pluginin').html("");
}
});
//显示遮罩层
function showOverlay(v) {
// $("#info").css('display', 'block');
//对话框位置控制
var oHeight = window.document.body.offsetHeight;
var oWidth = window.document.body.offsetWidth;
var oTop = (oHeight - $("#div_title").height()) / 2;
var oLeft = (oWidth - $("#div_title").width()) / 2;
$("#div_title").css({ "top": oTop + "px", "left": oLeft + "px" });
$("#div_title").overlay().load(); //显示遮罩对话框
}
//隐藏遮罩层
function hideOverlay() {
// IsSubmitChecked == true; //重置
$('#div_title').overlay().close(); //隐藏提示框
}
</script>
调用:<a href="javascript:void(0);" value="1" οnclick="showOverlay(this.value);">弹出层</a>