使用DIV弹出框的代码示例，备忘。

1.思路

使用DIV模拟弹出框，一共用三个div:

divWindow: 原来的界面内容区域

divLogin：要弹出的内容区域

divBackground：给弹出内容区域做个遮罩的区域。

点击 “请先验证身份” 按钮弹出框，在弹出框中输入数据后点击 “完成并关闭” 按钮回到原来的界面。

2.全部代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../lib/jquery/jquery-1.9.1.min.js"></script>

    <style type="text/css">
        body {
            margin-top: 0px;
            margin-left: 0px;
            margin-bottom: 0px;
            overflow: hidden;
        }

        #divBackground {
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            z-index: 5000;
            background-color: #000;
            position: fixed;
            filter: alpha(opacity=60);
            opacity: 0.3;
            display: none;
        }

        #divLogin {
            margin: auto 90px;
            width: 618px;
            height: 485px;
            z-index: 5003;
            position: fixed;
            top: 50px;
            display: none;
            background-image: url(../Images/erdaizheng.png);
        }

    </style>


    <script>

        function show() {

            DivShowAndHidden(
                      "#divBackground"   //弹出的黑色背景层
                      ,
                      "#divLogin" //要显示的子层
                      ,
                      "#divWindow" //要隐藏的子层
                  );
        }

        function DivShowAndHidden(div1, div2, div3) {

            if (div1 != "" && $(div1).css("display") == "none")
                $(div1).show();

            if (div2 != "" && $(div2).css("display") == "none")
                $(div2).show();

            if (div3 != "" && $(div3).css("display") == "block")
               $(div3).hide();
        }

        function hide() {

            DivShowAndHidden1(
                      "#divBackground"   //关闭黑色背景层
                      ,
                      "#divLogin" //关闭刚才弹出的子层
                      ,
                      "#divWindow" //显示刚才被隐藏的子层
                  );


        }

        function DivShowAndHidden1(div1, div2, div3) {

            if (div1 != "" && $(div1).css("display") == "block")
                $(div1).hide();

            if (div2 != "" && $(div2).css("display") == "block")
                $(div2).hide();

            if (div3 != "" && $(div3).css("display") == "none")
                $(div3).show();
        }        

    </script>
</head>
<body>
    <div id="divBackground">
        divBackground
    </div>

    <div id="divLogin">
        <div style="width:50%" >
           
            <br /><br /><br /><br /><br /><br /><br />
                       
            如果没有身份证，就输入账号密码：
            <br /><br />
                       
            登录名：<input type="text">
            <p></p>
                       
            密 码：<input type="text" />
            <p></p>
                       
            <input type="button" onclick="hide()" value="完成并关闭" />
            </div>
    </div>

    <div id="divWindow">
        <br />
            divWindow 原来的表单窗口
        <div>
            
            <br /><br />
                       
            你从哪里来：<input type="text">
            <p></p>
                       
            要到哪里去：<input type="text" />
            <p></p>
                       

        </div>
    </div>

        <input type="button" onclick="show()" value="请先验证身份" />
</body>
</html>

posted on 2015-01-09 14:02 BobLiu 阅读(2093) 评论(0) 编辑收藏举报