使用CSS3在加载时触发弹出窗口

Triggering popup on load using CSS3

本文关键字：窗口 CSS3 加载 使用      更新时间：2023-09-26

我在过去的每个线程中都找过答案，但找不到。我在触发弹出窗口时遇到了问题。我用了一些在线教程来制作弹出窗口。我成功地做到了，但触发它的唯一方法是点击。像这样：

<a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog">

我检查了这个线程，但它对我不起作用。

所以我只是简单地将用户重定向到触发弹出窗口的URL。

HTML:

<body onload="Redirect()">

JavaScript:

   <script type="text/javascript">
    function Redirect() {
               window.location="My_url/index.html#openModal";
            }
      </script>

破解CSS解决方案

如果你使用:target技巧来创建一个只使用CSS的触发器，而不仅仅是交换常规规则和目标规则，那么弹出窗口将在加载时呈现为其他所有规则，关闭按钮将隐藏弹出窗口：

#close:target {
   display: none;
}
/*Just for style*/
#close {
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: red;
}
<div id="close">
    <a href="#close">Close (X)</a>
    <p>We hate pop-ups!</p>
</div>

Standar JavaScript解决方案

否则，如果您在加载时使用JavaScript执行显示代码，那么为什么不全部使用JavaScript呢？你已经不是"；仅CSS"：

window.onload = function() {
    document.getElementById('popup').style.display = 'block';
};
document.getElementById('close').addEventListener('click', function () {
    document.getElementById('popup').style.display = 'none';
});
#popup {
    display: none;
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: red;
}
<div id="popup">
    <a href="#c" id="close">Close (X)</a>
    <p>We hate pop-ups!</p>
</div>

相关文章：