使用JQuery实现简单的半透明遮盖层 + 弹出框居中 Demo

　　在平时做小项目的时候经常会用到弹出层，虽然不难，可是前端毕竟还不是很熟的，所以每次都要“Search + 调试”好久才可以用，比较耽误时间。使用一些框架的学习成本略高，对于小项目来说不太成比例，长时间不用又忘了，而且由于是框架考虑的因素较多，也并不都适合自己。

　　还是喜欢自己实现一个挫挫的练练手，留着以后备用^_^。至于框架，有时间再学习整理啦。此处留一个今天刚实现的：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简单的半透明遮盖层 + 弹出框居中 Demo</title>
    <style type="text/css">
        /* 弹出层 */
        .pop-box {   
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/  
            border:2px solid #C4E3FF;
            margin:0; 
            display: none;
            position:fixed;
            background-color:#E1F1FF;
        }  
         
        .pop-box header {
            padding:12px 0 0 12px;
            margin:0;
            height:25px;
        }
        
        .pop-box h3  {
            color:#555;
            font-size:13px;
            margin:0;
        }
        
        .pop-box-body {   
            clear: both;   
            padding:0 13px 13px 13px;
            margin: 0;  
            font-size:13px;  
        } 
        
        .mask {   
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
            background-color:#666;
            filter: Alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
            z-index: 9998; /*这个数值比pop box小*/ 
        } 

    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
       <script language=javascript type="text/javascript">
        function popupDiv(div_id) {   
        var div_obj = $("#" + div_id);  
        var posLeft = ($(window).width() - div_obj.width()) / 2;
        var posTop = ($(window).height() - div_obj.height()) / 2;
    
        //添加并显示遮罩层   
        $("<div id='mask'></div>").addClass("mask")     
                                  .appendTo("body")   
                                  .fadeIn(200); 
                                  
        div_obj.css({"top": posTop , "left": posLeft}).fadeIn();                  
    }   
      
    function hideDiv(div_id) {   
        $("#mask").remove();   
        $("#" + div_id).fadeOut();   
    }  
   </script>
</head>
<body>
    <form id="pop-form">
        <div id='pop-div' style="width: 400px;" class="pop-box">  
            <header>
                <h3>标题位置</h3> 
               </header>
            <div class="pop-box-body">  
                <p>  
                    正文内容   
                </p>  
                <input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float:right"/>
            </div>  
        </div>
        <input type="button" id="btnTest"  value="弹出" onclick="popupDiv('pop-div');"/>
    </form>
 
</body>
</html>

最终效果，初始：

点击按钮：

posted @ 2013-01-08 22:11  YUKI小糖  阅读(3099)  评论(0)  编辑  收藏  举报