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

crcmnpdw 于 2022-12-27 发布在 HTML5

关注(0)|答案(3)|浏览(218)

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

css

来源：https://stackoverflow.com/questions/14413982/how-to-make-a-modal-window-in-html5-and-css3-popup-automatically

3条答案

按热度按时间

slhcrj9b1#

您可以使用keyframe animations（support），类似于：

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

不过要小心pointer-events，它们在任何版本的IE或Opera中都不起作用--参见CSS中对指针事件的支持。
我刚刚做了一个非常简单的demo。

赞(0）回复(0）举报 2022-12-27

x3naxklr2#

试试这个，对我很有效

<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

赞(0）回复(0）举报 2022-12-27

8xiog9wr3#

你可以把模态窗口的链接放在span或div中，然后在使用jquery加载页面时使用.click（）函数自动加载。

赞(0）回复(0）举报 2022-12-27