JQUERY弹出模式DIV

弹出DIV是采用JQUERY+CSS联合控制的，JQUERY弹出窗口，CSS控制层的显示和效果

页面代码：

[html]
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/pop.js"></script>
<link type='text/css' rel='Stylesheet' href='style/pop.css' />
<title>Insert title here</title>
</head>
<body>

    <div id='pop-div' style="width: 300px" class="pop-box">
        <h4 class="pop-boxh4">标题位置</h4>
        <div class="pop-box-body">
            <p>弹出内容</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="选择" onclick="popupDiv('pop-div')"
        style="cursor: pointer;">
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/pop.js"></script>
<link type='text/css' rel='Stylesheet' href='style/pop.css' />
<title>Insert title here</title>
</head>
<body>

<div id='pop-div' style="width: 300px" class="pop-box">
  <h4 class="pop-boxh4">标题位置</h4>
  <div class="pop-box-body">
   <p>弹出内容</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="选择" onclick="popupDiv('pop-div')"
  style="cursor: pointer;">
</body>
</html>
JS代码

[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");
}

CSS代码

[css]<

补充：web前端 , JavaScript ,