zoukankan      html  css  js  c++  java
  • 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=" 300px;" class="pop-box"> 
                <h4>标题位置</h4> 
                <div class="pop-box-body" > 
                    <p> 
                        正文内容  
                    </p> 
                    <input id=btnClose type=button onclick="hideDiv('pop-div');" value="关闭"/>
                </div> 
            </div>
        <input type=button id=btnTest  value='test' onclick="popupDiv('pop-div');"/>
        </form>
      
    </body>
    </html>
  • 相关阅读:
    进入MFC讲坛的前言(四)
    进入MFC讲坛的前言(二)
    进入MFC讲坛的前言(一)
    进入MFC讲坛的前言(三)
    jar命令+7z:创建,替换,修改,删除Jar, war, ear包中的文件
    java架构之项目结构(entity / DTO / VO)
    面试无忧之Zookeeper总结心得
    BigDecimal.setScale 处理java小数点
    最详细的 paypal 支付接口开发--Java版
    社会化登录分享-Android SDK的二次封装和使用
  • 原文地址:https://www.cnblogs.com/only_J/p/1657474.html
Copyright © 2011-2022 走看看