js实现在页面中点击一个按钮弹出模态框

最新推荐文章于 2024-05-23 21:59:51 发布

han_han__

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量4k

点赞数 3

分类专栏： JS html

本文链接：https://blog.csdn.net/han_han__/article/details/126770036

版权

HTML CSS JavaScript 模态框交互设计

关键词由CSDN通过智能技术生成

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

一、初始页面

二、点击按钮后

三、点击“×”后，效果与图一相同。

HTML代码：


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="../清楚浏览器格式.css">
    <link rel="stylesheet" href="./模态框.css">
</head>

<body>
    <button class="btn">模态框</button>
    <div class="box">
        <div class="content">
            <span id="closeBtn" class="close">×</span>
            <h2>这是一个模态框！</h2>
        </div>
    </div>
    </div>
</body>

CSS代码：

/* 按钮 */
button {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

/*模态框*/
.box {
    position: relative;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: lightpink;
    opacity: 80%;
    align-items: center;
}

/*模态框内容*/
.content {
    top: 35vh;
    display: flex;
    position: relative;
    background-color: lightblue;
    opacity: 1;
    margin: auto;
    padding: 20px;
    width: 30vw;
    height: 150px;
    border-radius: 20px;

}


/*关闭按钮*/
.close {
    position: relative;
    top: -35px;
    right: -390px;
    text-align: center;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background-color: aliceblue;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
}

.close:hover {
    color: black;
    cursor: pointer;
}

h2 {
    align-items: center;
    height: 150px;
    line-height: 150px;
}

JS代码：

    <script>
        let button = document.querySelector(".btn")
        let closeBtn = document.querySelector(".close");
        let box = document.querySelector(".box");
        console.log(button, closeBtn, box);
        // 点击按钮显示模态框
        button.onclick = function () {
            box.style.display = "block";
        }
        // 点击关闭按钮隐藏模态框
        closeBtn.onclick = function () {
            box.style.visibility = "hidden";
        }
    </script>