js+div实现弹出框

最新推荐文章于 2024-12-17 20:09:28 发布

qazxsw635241

最新推荐文章于 2024-12-17 20:09:28 发布

阅读量4k

点赞数 2

分类专栏： js 文章标签： js 弹出层

本文链接：https://blog.csdn.net/qazxsw635241/article/details/92804185

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<input type="button" name="popBox" value="弹出框" onclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
    <div class="close">
        <a href="javascript:void(0)" onclick="closeBox()">关闭</a>
    </div>
    <div class="content">我是弹出层</div>
</div>

<style>
/*背景层*/
#popLayer {
    display: none;
    background-color: #B3B3B3;
    position: absolute;
    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: 250px;
    height: 180px;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;border-radius:5px;
}
#popBox .close{
    text-align: right;
    margin-right: 5px;
    background-color: #F8F8F8;border-top-left-radius:5px;border-top-right-radius:5px;
}
/*关闭按钮*/
#popBox .close a {
    text-decoration: none;
    color: #2D2C3B;
}
</style>

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