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

Question

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

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

Answer 1

您可以使用keyframe animations（support）。类似的东西：

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

但要小心pointer-events。它们不适用于任何版本的IE或Opera - see support for pointer-events in CSS。

我刚刚做过一个非常简单的demo。

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（）函数自动加载它。