弹出层

shuxiang

浏览: 28421 次
性别:
来自: 珠海

最近访客更多访客>>

shaogx

c04s31602

AlexTing

sjt2015

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery JavaScript IE 浏览器 CSS

一个简单的弹出层：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script src="jquery-1.3.2.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
                //点击显示遮蔽层并动态设置遮蔽层的高度
                $("button").click(function(){
                    $("#overlayer").height($(document).height()).fadeIn("slow");
					$(".pop_div_title a").click(function(){
						$("#overlayer").fadeOut("slow");
					});
                });
            });
        </script>
        <style type="text/css">
            body {
                margin: 0; /*除去body和浏览器之间的间距*/
                /*
                 height:100%;
                 */
            }
            
            /*遮蔽层样式*/
            #overlayer {
                background-color: #000000;
                /* 百分之百是指父容器高度的百分之百，
                 * 所以在IE中如果没有指定body的父容器的高度，
                 * 则子元素的100%只是一个默认的高度,但FF却不会
                 * FF中会显示当前浏览的高度，为了适应内容 的高度，
                 * 在这里动态设置高度。
                 * */
                height: 100%;
                opacity: 0.7;
                *filter: alpha(opacity = 70);
                position: absolute;
                width:
                100%;
                z-index:
                3;
                /*初始不显示遮蔽层*/
            display:none;
            }
            
            /*弹出层样式*/
            #pop_div {
                width: 262px;
                height: 194px;
                border: 5px solid #E9F3FD;
				position:absolute;
				top:300px;
				left:45%;
            }
            
            .pop_div_title {
                height: 30px;
                border: 1px solid #A6C9E1;
                background-color: white;
            }
            .pop_div_title span{
            	margin:0 0 0 180px;
            }
            .pop_div_content {
            	height:160px;
                border: 1px solid #A6C9E1;
                background-color: white;
            }
            
            #container {
                width: 100%;
                height: 1000px;
            }
        </style>
    </head>
    <body>
        <div id="overlayer">
            <div id="pop_div">
                <div class="pop_div_title">
                                           标题<span><a>关闭</a></span>
                </div>
                <div class="pop_div_content">
                    这是弹出DIV内容
                </div>
            </div>
        </div>
        <div id="container">
            <button>
                试试
            </button>
        </div>
    </body>
</html>

效果：