html - 如何在 HTML5 和 CSS3 中自动弹出模态窗口

Question

我在网上找到了一些代码，允许我创建和设计一个模式窗口，供访问者注册我们的时事通讯，但我希望这个模式窗口在打开索引页面时自动弹出。到目前为止，我只能找到依赖于用户单击超链接的模式窗口。有没有我可以用来自动打开模态窗口的功能或自动加载超链接的方法。

这是我用来创建模态窗口的链接。关联

Answer 1

您可以使用关键帧动画（支持）。就像是：

.modalDialog {
   /* other styles */
   animation: showup .5s;
}
@keyframes showup { to { opacity: 1; } } 

不过要小心pointer-events。它们不适用于任何版本的 IE 或 Opera -请参阅CSS 中对指针事件的支持。

我刚刚做了一个非常简单的演示。

Answer 2

试试这个它对我有用

<script type="text/javascript">    
    $(function () {    
        $("#dialog").dialog({    
            modal: true,    
            autoOpen: false,
            title: "jQuery Dialog",    
            width: 300,    
            height: 150    
        });    
        $("#btnShow").click(function () {    
            $('#dialog').dialog('open');    
        });    
    });    
</script>

参考：Open-Show-jQuery-UI-Dialog-Modal-Popup-on-Button-Click

Answer 3

您始终可以在 span 或 div 中包含到模态窗口的链接。然后在使用 jquery 的页面加载时使用 .click() 函数自动加载它。