欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

弹出层

程序员文章站 2022-05-06 09:14:07
...

一个简单的弹出层：

<!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>

 效果：


弹出层

 

在样式和拖拽方面可以优化，期待改进……

相关标签： jQuery JavaScript IE 浏览器 CSS

上一篇： JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

下一篇： 弹出层

推荐阅读