《CSS实战案例汇总》弹窗

Posted la_vie_est_belle

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《CSS实战案例汇总》弹窗相关的知识,希望对你有一定的参考价值。

弹窗

实现效果

HTML代码

CSS代码

JS代码


实现效果

 

html代码

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <button onclick="openPopup()">打开弹窗</button>

    <div class="popup">
        <div class="close" onclick="closePopup()">&times;</div>
        这是一个弹窗ヾ(≧∇≦*)ゝ
    </div>
</body>

<script src="demo.js"></script>
</html>

1. button元素有一个onclick属性,当用户点击后就会触发openPopup()函数,弹窗就会被打开。

2. 在类名为popup的div元素中有一个div元素被作为关闭按钮,当用户点击该元素后,弹窗就会被关闭。

3. &times;是html字符实体,也就是乘号×,不是字母x。

 

CSS代码

/* 弹窗样式 */
.popup {
    width: 500px;
    height: 200px;
    background-color: white;

    border-radius: 5px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);

    position: absolute;
    left: 470px;
    top: 100px;

    /* 内部元素水平垂直居中 */ 
    /* 默认不显示 */ 
    display: none;
    align-items: center;
    justify-content: center;
}

/* 弹窗上的关闭元素样式 */
.close {
    position: absolute;
    left: 6px;
    top: 0;

    cursor: pointer;
    text-decoration: none;
}

1. 弹窗的重点在于display值,如果该值为none,则可以隐藏弹窗。

2. 当然如果不使用display的话,我们也可以在html代码中使用hidden属性来实现相同效果。

3. cursor: pointer; 可以让鼠标移动到关闭按钮上时变成一只手,看上去更有按钮的样子。

 

JS代码

// 打开弹窗
function openPopup () {
    let popup = document.getElementsByClassName('popup')[0]
    popup.style.display = 'flex'
}

// 关闭弹窗
function closePopup () {
    let popup = document.getElementsByClassName('popup')[0]
    popup.style.display = 'none'
}

1. 当用户点击打开弹窗按钮时,将popup元素css中的display值修改为flex,使其可见。

2. 当用户点击弹窗上的关闭按钮时,将popup元素css中的display值修改为none,使其不可见。

以上是关于《CSS实战案例汇总》弹窗的主要内容,如果未能解决你的问题,请参考以下文章

《CSS实战案例汇总》涟漪

《CSS实战案例汇总》涟漪

《CSS实战案例汇总》加载动画

《CSS实战案例汇总》加载动画

前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

爬虫遇到头疼的验证码?Python实战讲解弹窗处理和验证码识别