弹出层-(来自一个取名废)

html

<input type="button" value="弹出层" onclick="showdiv()"/>
<!--弹出层时背景层DIV-->
<div id="fade" class="bgdiv">
</div>
<!--弹出层的空白部分-->
<div id="mydiv" class="white_show">
    <div style="text-align: right;cursor: pointer;height: 40px">
        <span style="font-size: 16px;" onclick="closediv(this)">关闭</span>
    </div>
    <p>目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。</p>

</div>

js

 var fade=document.getElementById("fade");
    var mydiv=document.getElementById("mydiv");
    function showdiv(){
        fade.style.display="block";
        mydiv.style.display="block";
    }
    function closediv(){
        fade.style.display="none";
        mydiv.style.display="none";
    }

css

  /*背景层的样式设置*/
        .bgdiv{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: black;
            z-index: 1001;
            opacity: 0.5;
            -moz-opacity: 0.5;
        }
        /*弹出层样式*/
        .white_show{
            display: none;
            position: absolute;
            left: 25%;
            top: 25%;
            width: 50%;
            height: 50%;
            border: 1px solid lightblue;
            background: white;
            z-index: 1002;
            overflow: auto;
            border-radius: 5px;
        }