js+css写一个弹出层

<div class="onlines">

<a onclick="popBox()">在线咨询</a>

</div>

       

       

 <div id="popLayer"></div>

  <div id="popBox">

    <div class="close">

        <a  onclick="closeBox()">x</a>

    </div>

    <div class="content">

    这是一个弹出窗

    </div>

</div>


       

  <script>

    /*点击弹出按钮*/

    function popBox() {

        var popBox = document.getElementById("popBox");

        var popLayer = document.getElementById("popLayer");

        popBox.style.display = "block";

        popLayer.style.display = "block";

    };

 

    /*点击关闭按钮*/

    function closeBox() {

        var popBox = document.getElementById("popBox");

        var popLayer = document.getElementById("popLayer");

        popBox.style.display = "none";

        popLayer.style.display = "none";

    }

</script>



#popLayer {

            display: none;

            background-color: #B3B3B3;

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            z-index: 10;

            -moz-opacity: 0.8;

            opacity:.80;

            filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */

        }

 

     

        #popBox {

            display: none;

            background-color: #FFFFFF;

            z-index: 11;

            width: 300px;

            height: 300px;

            position:fixed;

            top:0;

            right:0;

            left:0;

            bottom:0;

            margin:auto;

        }

 

#popBox .close {

    text-align: right;

    margin-right: 5px;

    position: relative;

}

 .content img {

    width: 100%;

}


      #popBox .close a {

    text-decoration: none;

    color: #ffffff;

    cursor: pointer;

    position: absolute;

    top: -25px;

    font-size: 26px;

    background: #000000;

    height: 30px;

    width: 30px;

    text-align: center;

    line-height: 25px;

    border-radius: 20px;

}

image

微信扫码咨询
建站咨询
cache
Processed in 0.005385 Second.