纯css实现自定义弹窗

Posted 2023-04-01 Mr.Joden

前言：

有必要先了解以下思路再进行代码的书写

思路

### 其实弹窗实现很简单：
    1. 首先准备一个顶层div
        将作为弹窗
        设置z-index为一个比较大的值，如z-index=30，使其置于顶层；
        设置display:none，使初始被隐藏；
        
    2. 添加锚定行为
        定义一个a标签，使被点击时弹窗div被锚定，会触发被锚定标签的“当前活动”伪类样式
        
    3. 给弹窗div设置“当前活动”伪类样式，即：弹窗div:targetcss
        使其显示：display:block
​
    4. 给弹窗div添加一个子a标签，用于隐藏窗口
        给这个子a标签href="#"
        当点击后使弹窗div不为当前活动元素，从而使其target伪类样式不生效
        
        
### 另外使整个网页背景虚化：
    其实也是主要利用z-index来实现一个图层，该图层尺寸占整个网页窗口尺寸、有一定的透明度、在弹窗div中定义作为其子元素(使具有和弹窗相同的行为)

代码

<style>
    html,body
        margin: 0;
        padding: 0;
        width: 100%;
        height:100%;
    
    .app
        width: 100%;
        height: 100%;
    
    .window
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: none;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 20;    /*背景层*/
        text-align: center;
    
​
    .window:target
        display: block;
​
    
    .window_content
        width: 400px;
        height: 400px;
        margin: 15% auto;
        z-index: 30;    /*置顶窗口层*/
        background-color: pink;
    
</style>
​
​
​
​
<!-- 在这里设置一个弹窗 -->
<div id="window" class="window">
    <div class="window_bg"></div>
    <div class="window_content">
        <h1>MyWindow</h1>
        <h2>hello world</h2>
        <a href="#">关闭</a>
    </div>
</div>
​
<div class="app">
    <button class="link">
        <a href="#window">弹窗</a>
    </button>
</div>

应用htmlcssjs实现自定义弹窗效果

HTMl部分
首先要有一个触发事件的按钮
弹窗背景（一般是全屏的 z-index和backgroundcolor）
弹窗容器（header、body、footer）
值得一提的是我们一般都会给元素类名和id
id用来获取元素类用来设置样式
CSS部分
首先设置好相应的样式
通过animation xx 2s 配合@keyframes 来实现动画效果
JavaScript部分
// 获取弹窗元素 通过js控制css使它隐藏或显示
var modal = document.getElementById("simpleModal");

// 获取按钮元素
var modalBtn = document.getElementById("modalBtn");

// 获取关闭弹窗按钮元素
var closeBtn = document.getElementsByClassName(‘closeBtn‘)[0];

// 监听打开弹窗事件 值得一提的是监听命令和jQuery的on很相像
modalBtn.addEventListener("click",openModal);

// 监听关闭弹窗事件
closeBtn.addEventListener("click",closeModal);

// 监听window关闭弹窗 这里为了实现 点击弹窗外部实现关闭
window.addEventListener("click",outsiteClick);

// 弹窗事件
function openModal(){
modal.style.display = "block";
}

// 关闭弹窗
function closeModal(){
modal.style.display = "none";
}

// outsiteClick
function outsiteClick(e){
if (e.target == modal) {
modal.style.display = "none";
}
}