您的位置：首页 > Web前端 > JQuery

jquery div模态窗口

2015-06-08 17:03 696 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>test</title>

<script src="../../js/lib/jquery.js"></script>

<style type="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>

<script type="text/javascript">

function popupDiv(div_id) {

// 获取传入的DIV

var $div_obj = $("#" + div_id);

// 计算机屏幕高度

var windowWidth = $(window).width();

// 计算机屏幕长度

var windowHeight = $(window).height();

// 取得传入DIV的高度

var popupHeight = $div_obj.height();

// 取得传入DIV的长度

var popupWidth = $div_obj.width();

// // 添加并显示遮罩层

$("<div id='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*/

function hideDiv(div_id) {

$("#bg").remove();

$("#" + div_id).animate({

left : 0,

top : 0,

opacity : "hide"

}, "slow");

}

</script>

</head>

<body>

<div id='pop-div' style="width: 300px;height:500px;" class="pop-box">

<h4 class="pop-boxh4">22</h4>

<div class="pop-box-body">

<p>33</p>

</div>

<div id='buttonPanel' style="text-align: right"

style="text-align:right">

<input type="button" value="Close" id="btn1"

onclick="hideDiv('pop-div');" />

</div>

</div>

<input type="button" value="21" onclick="popupDiv('pop-div')"

style="cursor: pointer;">

<div>2222222333</div>

<input type="text"></input>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航