CSS ::backdrop控制dialog元素背景实例页面

回到相关文章 »

效果：

点击下面按钮显示弹框：

代码：

CSS代码：

/* 给弹框背景加个透明 */
dialog::backdrop {
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

HTML代码：

<dialog id="dialog" align="center">
    <h2>欢迎关注我的个人公众号</h2>
    <p><img src="./qrcode.jpg"></p>
    <p><button id="buttonClose">好的，已关注</button></p>
</dialog>
<p><input type="button" id="buttonShow" value="出现吧，弹框"></p>

JS代码：

buttonShow.addEventListener('click', function () {
    dialog.showModal();    
});
buttonClose.addEventListener('click', function () {
    dialog.close();    
});