zoukankan      html  css  js  c++  java
  • 3前端案例-遮罩

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>

            <title>DIV CSS遮罩层</title>

            <script language="javascript" type="text/javascript">

                function showdiv() {

                    document.getElementById("bg").style.display = "block";

                    document.getElementById("show").style.display = "block";

                }

                function hidediv() {

                    document.getElementById("bg").style.display = 'none';

                    document.getElementById("show").style.display = 'none';

                }

                

            </script>

            <style type="text/css">

                #bg {

                    display: none;

                    position: absolute;

                    top: 0%;

                    left: 0%;

                     100%;

                    height: 100%;

                    background-color: black;

                    z-index: 1001;

                    -moz-opacity: 0.7;

                    opacity: .70;

                    filter: alpha(opacity=70);

                }

                

                #show {

                    display: none;

                    position: absolute;

                    top: 25%;

                    left: 22%;

                     53%;

                    height: 49%;

                    padding: 8px;

                    border: 8px solid #E8E9F7;

                    background-color: white;

                    z-index: 1002;

                    overflow: auto;

                }

            </style>

        </head>

        <body>

            <input id="btnshow" type="button" value="Show" onclick="showdiv();" />

            <div id="bg" onclick="hidediv();"></div>

            <div id="show">测试

                <input id="btnclose" type="button" value="Close" onclick="hidediv();" />

            </div>

        </body>

    </html>

  • 相关阅读:
    八卦——朋友的老公有外遇
    吃,玩——幸福的上海一天
    婚礼——金茂群楼豪华婚礼
    吃狂吃大喜九
    玩——苏州粗体验
    XCF之原形
    快速类型判定
    ReaderWriterLockSlim使用注意事项
    WCF服务端基于配置的实现——路由
    Opera使用心得
  • 原文地址:https://www.cnblogs.com/wujunbin/p/7461052.html
Copyright © 2011-2022 走看看