直接上代码
前端
<div id="div_mode" class="div_mode"></div>
<!--这是要覆盖网页的层,不必写任何东西-->
<div id="div_content" class="div_content">
<div id="div13" style=" 100%; height: 20px; background-color: #0099FF" align="right">
<label onclick="closeShow()" style="font-weight: bolder; cursor: hand">
关闭 <!--用来关闭显示,在label中加了onclick事件,与鼠标悬停手的样式-->
</label>
<div id="divResult">
</div>
</div>
<!--这是弹出的模式窗口层-->
<input type="radio" name="merchandiseSort" value="00" checked="checked" />
</div>
<li class="pc-imlp-component-navigation-item" onclick="yyjs()">医院介绍。在这调用
</li>
JS部分
<script type="text/javascript">
//显示的方法,说明:前缀的div1、div2、body等,均为Id值
function yyjs() {
var loadid = layer.load(1, { shade: 0.1 });
var url = "Admin001/Conts.aspx?act=Getyyjs";
$.ajax({
type: "post",
url: url,
dataType: "json",
data: { key: 1 },
success: function (r) {
try {
if (r.code > 0) {
$("#divResult").html(r.result);//这里加载完赋值
popdiv_();//这里调用模式窗口
}
else {
layer.msg(r.ErrorMsg, { icon: 5 });
layer.close(loadid);
}
} catch (e) {
layer.close(loadid);
}
}, complete: function (r) {
layer.close(loadid);
}
});
}
function popdiv_() {
$("#div_mode").css("display", "inline");
//div1.style.display="inline";//设置层1显示
$("#div_mode").css("width", $(document).width());
//div1.style.width=body.clientWidth;//设置层1宽度等于body宽度,width=100%也可以,不过有一些误差,所以最好用这个
$("#div_mode").css("height", $(document).height());
//div1.style.height=body.clientHeight;//设置层1高度满屏
$("#div_content").css("display", "inline");
//div2.style.display="inline";//设置层2的显示
$("#div_content").css("top",
$(document).height() / 2 - $("#div_content").height() / 2);
//div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
$("#div_content").css("left",
$(document).width() / 2 - $("#div_content").width() / 2);
// div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
}
function closeShow() {
$("#div_mode").css("display", "none");
$("#div_content").css("display", "none");
}
</script>
<style>
.div_content {
display: none;
position: fixed;
top: 50%;
left: 50%;
480px;
margin-left: -240px;
height: 300px;
margin-top: -150px;
padding: 0;
border: 12px solid #3777BC;
background-color: #F0F5F8;
_position: absolute;
z-index: 1011;
overflow: hidden;
}
.div_mode {
display: none;
position: fixed;
top: 0%;
left: 0%;
100%;
height: 100%;
background-color: black;
z-index: 1010;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
</style>