css同页中点击弹出提示窗口

CSS同页中点击弹出提示窗口

在网页中，弹出一个提示窗口是十分常见的操作。我们可以通过CSS来实现同页中点击弹出提示窗口的效果。

HTML结构：
<div class="overlay">
    <div id="popup">
        <p>提示内容</p>
        <button id="close-btn">关闭</button>
    </div>
</div>

CSS样式：
.overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0.6);
    display: none;
}
#popup {
    position: absolute;
    z-index: 10000;
    top: 50%;
    left: 50%;
    width: 400px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;
}
#close-btn {
    display: block;
    margin-top: 10px;
}

JS代码：
var overlay = document.querySelector('.overlay');
var popup = document.querySelector('#popup');
var closeBtn = document.querySelector('#close-btn');

function openPopup() {
    overlay.style.display = 'block';
}
function closePopup() {
    overlay.style.display = 'none';
}
closeBtn.addEventListener('click',closePopup);
overlay.addEventListener('click',closePopup);

在JS代码中，我们定义了三个变量分别代表弹出层，弹出框及关闭按钮，openPopup和closePopup两个函数分别用于打开和关闭弹出层，事件监听函数用于监听关闭按钮和弹出层的点击事件，在点击后执行关闭操作。

使用CSS实现同页中点击弹出提示窗口，代码简单易懂，效果十分实用，值得在网页中广泛应用。