jquery 弹出浮层(div) + 遮蔽层

<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>test</title>
    <script type="text/javascript" src="jquery/jquery-1.2.6.js" ></script>
    <style type="text/css">
        .pop-box {  
            z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/ 
            margin-bottom: 3px;  
            display: none;  
            position: absolute;  
            background: #FFF;  
            border:solid 1px #6e8bde;  
        }  
         
        .pop-box h4 {  
            color: #FFF;  
            cursor:default;  
            height: 18px;  
            font-size: 14px;  
            font-weight:bold;  
            text-align: left;  
            padding-left: 8px;  
            padding-top: 4px;  
            padding-bottom: 2px;  
            background: url("../images/header_bg.gif") repeat-x 0 0;  
        }  
         
        .pop-box-body {  
            clear: both;  
            margin: 4px;  
            padding: 2px;  
        }
       
       
        .mask {  
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            filter: Alpha(Opacity=60);
        }
    </style>
   <script language=javascript type="text/javascript">
    function popupDiv(div_id) {  
        var div_obj = $("#"+div_id); 
        var windowWidth = document.body.clientWidth;      
        var windowHeight = document.body.clientHeight; 
        var popupHeight = div_obj.height();      
        var popupWidth = div_obj.width();   
        //添加并显示遮罩层  
        $("<div id='mask'></div>").addClass("mask")  
                                  .width(windowWidth + document.body.scrollWidth)  
                                  .height(windowHeight + document.body.scrollHeight)  
                                  .click(function() {hideDiv(div_id); })  
                                  .appendTo("body")  
                                  .fadeIn(200);  
        div_obj.css({"position": "absolute"})  
               .animate({left: windowWidth/2-popupWidth/2,   
                         top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");  
                       
    }  
     
    function hideDiv(div_id) {  
        $("#mask").remove();  
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");  
    } 
   </script>
   
</head>
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box"> 
            <h4>标题位置</h4> 
            <div class="pop-box-body" > 
                <p> 
                    正文内容  
                </p> 
                <input id=btnClose type=button οnclick="hideDiv('pop-div');" value="关闭"/>
            </div> 
        </div>
    <input type=button id=btnTest  value='test' οnclick="popupDiv('pop-div');"/>
    </form>
  
</body>
</html>

转载于:https://www.cnblogs.com/Dot-Boy/archive/2009/07/06/1517747.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值