jquery div模态窗口的简单实例
jquerydiv模态窗口的简单实例
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<scriptsrc="../../js/lib/jquery.js"></script>
<styletype="text/css">
.pop-box{
/*弹出窗口后，弹出的DIV采用此CSS，保证置于最上层
z-index控制Z轴的坐标，数值越大，离用户越近
*/
z-index:9999999;/*这个数值要足够大，才能够显示在最上层*/
margin-bottom:3px;
display:none;
position:absolute;
background:gray;
border:solid1px#6e8bde;
}
#bg{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
/*弹出窗口后，添加遮罩层，采用此CSS，将该层置于弹出DIV和页面层之间
z-index控制Z轴的坐标，数值越大，离用户越近rgba(72,74,68,0.46)
*/
z-index:1001;
background-color:#8f9f8f;
-moz-opacity:0.7;
opacity:.70;
filter:alpha(opacity=70);
}
</style>
<scripttype="text/javascript">
functionpopupDiv(div_id){
//获取传入的DIV
var$div_obj=$("#"+div_id);
//计算机屏幕高度
varwindowWidth=$(window).width();
//计算机屏幕长度
varwindowHeight=$(window).height();
//取得传入DIV的高度
varpopupHeight=$div_obj.height();
//取得传入DIV的长度
varpopupWidth=$div_obj.width();
////添加并显示遮罩层
$("<divid='bg'></div>").width(windowWidth*0.99)
.height(windowHeight*0.99).click(function(){
//hideDiv(div_id);
}).appendTo("body").fadeIn(200);
//显示弹出的DIV
$div_obj.css({
"position":"absloute"
}).animate({
left:windowWidth/2-popupWidth/2,
top:windowHeight/2-popupHeight/2,
opacity:"show"
},"slow");
}
/*隐藏弹出DIV*/
functionhideDiv(div_id){
$("#bg").remove();
$("#"+div_id).animate({
left:0,
top:0,
opacity:"hide"
},"slow");
}
</script>
</head>
<body>
<divid='pop-div'style="width:300px;height:500px;"class="pop-box">
<h4class="pop-boxh4">22</h4>
<divclass="pop-box-body">
<p>33</p>
</div>
<divid='buttonPanel'style="text-align:right"
style="text-align:right">
<inputtype="button"value="Close"id="btn1"
onclick="hideDiv('pop-div');"/>
</div>
</div>
<inputtype="button"value="21"onclick="popupDiv('pop-div')"
style="cursor:pointer;">
<div>2222222333</div>
<inputtype="text"></input>
</body>
</html>
以上这篇jquerydiv模态窗口的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。