WEB前端--JavaScript基础入门--自定义弹窗

QIAN539

于 2025-04-19 17:55:20 发布

阅读量397

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 javascript web

本文链接：https://blog.csdn.net/2502_91226253/article/details/147352807

使用软件：Visual Studio code

需求：

1、实现网页的页头视图的开发，页头中包含LOGO和”登录"视图

2、用户点击登录时，页面打开一个悬浮的登录弹窗

3、悬浮窗中点击关闭，可以关闭悬浮窗，重新显示网页页面

代码实现：

1、html网页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/demo04.css">
       
</head>
<body>
    <div class="bg">
        <!-- 布局层 -->
        <div class="layout">
            <!-- 内容层 -->
            <div class="logo">
                <img src="./img/1_20250418170024_27.jpg" alt="">
            </div>
            <div class="denglu">
                登录
            </div>
        </div>
    </div>
    
    <div class="box-bg">
        <div class="box">
            <div class="header">
                <spanc class="close">[关闭]</span>
            </div>
        </div>
    </div>
    <script src="../js/demo.js">

    </script>
    
</body>
</html>

2、css样式代码

.bg{
    width:100%;
    height:5rem;
    background-color: rgb(110, 107, 102);/*网页上下布局*/
}
.layout{/*上下布局中，上面的处理*/
    width:90%;
    height:100%;
    /* background-color:aquamarine; */
    /* margin: 上下边距0 左右边距auto-自动-居中 */
    margin: 0 auto;

    /* 处理内容对齐 */
    display:flex;/*设置成弹性盒子*/
    justify-content: space-between;/*主轴方向对齐*/
    align-items:center;/*交叉轴方向对齐*/
}
.logo img{/*对图片进行处理*/
    width: 4rem;
    height: 4rem;
    border-radius:50%;/*图片的圆角边框*/
}
.denglu{/*登录字体的处理*/
    font-size:1.8rem;
    cursor: pointer;/*鼠标点击，悬停效果*/
}
.denglu:hover{
    font-weight:700;/*鼠标点击，字体放大，颜色加深效果*/
}

.box-bg{ /*点击登录后，弹窗的背景处理*/
    display:none;/*没点击登录之前，弹窗是隐藏效果*/
    width:100%;
    height:100%;
    position: absolute;/*更好地控制元素的位置*/
    left: 0;
    top: 0;
    /* rgba(红，绿，蓝，透明度(0~1)) */
    background-color: rgba(0,0,0,0.5);
}
.box{/*对弹窗的处理*/
    width: 40rem;
    height: 30rem;
    background-color: #f1f0f0;

    /* 外边距：上下100像素，左右居中 */
    margin: 100px auto;
}
.header{/*对弹窗最上方的页头和关闭的处理*/
    width:100%;
    height:5rem;
   background-color:rgb(39, 36, 36);
    display:flex;/*弹性样式*/
    flex-direction: row-reverse;/*主轴方向对齐*/
    align-items: center;/*交出轴方向对齐*/
    font-size:1.8rem;/*关闭字体的大小设置*/
    cursor: pointer;/*鼠标悬停效果*/
}

3、js代码

let denglu =document.querySelector(".denglu")/*设置一个变量，存放dneglu标签*/
let close =document.querySelector(".close")/*设置一个变量，存放close标签*/
let box = document.querySelector(".box-bg")/*设置一个变量，存放boxbiao*/
denglu.onclick = function(){             /*处理点击“登录”，出现弹窗*/
    box.style.display = "block"
}
close.onclick = function(){           /*弹窗出来后，点击“关闭”，弹窗消失，回到网页*/
    box.style.display = "none"
}

效果展示

1、点击登录之前

2、点击登录后