js简单的弹层（带关闭按钮）

最新推荐文章于 2022-04-27 11:33:58 发布

cyerogy

最新推荐文章于 2022-04-27 11:33:58 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： JavaScript 弹层新手

本文链接：https://blog.csdn.net/cyerogy/article/details/9176165

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<html>

<head>

//下面红色的代码放到css文件中

    #add_value {
    margin-top:10px;
    display:none;
    z-index:750;
    position:fixed;
    background-color:#fefefe;
    width:600;
    border:1px solid #000;
    }

//关闭

window.onload = function ()
{
    var add_close=document.getElementById("add_close");
    var add_value=document.getElementById("add_value");
    add_close.onclick = function ()
      {
        add_close.style.display = "none";
        add_value.style.display="none";
      };
};

//弹层

function show() {

//得到该层
var Idiv = document.getElementById('add_value');

//将该层显示出来
Idiv.style.display = "block";

//确定层的位置
Idiv.style.left = (document.documentElement.clientWidth - Idiv.clientWidth)/2+ "px";
Idiv.style.top = (document.documentElement.clientHeight - Idiv.clientHeight)/2 + "px";

//设置鼠标的滚轮是否滚动
document.body.style.overflow = "scroll";
var oClose = document.getElementById("add_close");
oClose.style.display = "block";
}

</script>

</head>

<body>

//关闭按钮
        <a href="javascript:" id="add_close" style="float:right">[x]</a>
      </th>
    </table>

</div>

</body>

</html>