如何在HTML5和CSS3弹出框中自动创建一个模态窗口 [英] How to make a modal window in HTML5 and CSS3 popup automatically

问题描述

我在网上找到了一些代码，允许我创建和设计一个模态窗口的访客注册我们的通讯，但我想要这个模态窗口时自动弹出的索引页面打开时。到目前为止，我只能找到依赖于用户单击超链接的模态窗口。是否有一个函数，我可以使用自动打开模态窗口或一种方式自动加载超链接。

I found some code online allowing me to create and design a modal window for visitors to sign up to our newsletter, but i want this modal window to popup automatically when the index page is opened. So far i have only been able to find modal windows that rely upon the user clicking on a hyperlink. Is there a function i can use to automatically open the modal window or a way to automatically load a hyperlink.

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

This is the link i used to create my modal window. Link

推荐答案

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

You can use keyframe animations (support). Something like:

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

小心 pointer-events 虽然。它们不会在任何版本的IE或Opera中工作 - 请参阅支持CSS中的指针事件 。

Be careful with pointer-events though. They won't work in any version of IE or Opera - see support for pointer-events in CSS.

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

A really simple demo I just did.

这篇关于如何在HTML5和CSS3弹出框中自动创建一个模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！