松阳公司网站建设：创建模式窗口很容易与HTML5对话框

2019.09.02 松阳公司网站建设

128

模态窗口的一个最常见的用户界面,我们松阳公司网站建设可以在网站找到的。它通常用于携带订阅表格,上传形式(如在WordPress),显示通知和其他方法来画一个游客的关注重要的事情。

这么长时间,我们使用jQuery插件 jQuery UI对话框 , Twitter引导模式 ,或 Popeasy 创建一个。但HTML5已经引入了一个新标签 <对话框> 允许我们创建一个本机模式窗口容易得多。

使用 <对话框> 元素是一样的我们如何使用其他HTML元素。只需添加内容要显示在对话框窗口中,。

<对话框 id=“窗口”>

<h3> Hello World ! < /h3>

<p> Lorem ipsum悲哀坐amet, consectetur adipisicing elit。 Earum, inventore ! < /p>

<按钮 id=“退出”> < /退出按钮>

对话框>

<按钮 id=“秀”< / >显示对话框按钮>

但是请注意,当你把它在Chrome(目前只支持这个标签的浏览器)隐藏对话框窗口。鉴于上面的HTML结构,我们只会看到的显示对话框按钮。显示对话框窗口我们可以用它的JavaScript API ,告诉() ,并使用 .close () 隐藏它。

(函数(){

var 对话框= . getelementbyid (“窗口”);

. getelementbyid (“显示”)。 onclick =函数(){

dialog.show ();

};

. getelementbyid (“退出”)。 onclick =函数(){

dialog.close ();

};

})();

点击 “显示对话框” 按钮,对话框窗口将显示在浏览器窗口的中间。

我们松阳公司网站建设可以通过CSS定制对话框窗口。默认情况下,对话框窗口覆盖整个水平空间在浏览器中。所以,让我们指定宽度,。

对话框{

宽度:500 px;

}

此外, <对话框> 元素提供了一个新的伪元素 ::背景。它用于风格典型暗淡的背景,我们通常发现背后一个对话框窗口。它让游客更加关注其背后的对话框和隐藏一切。它似乎没有工作,但是在未来将支持。

HTML已经发展在过去的几年里。它不再是只对构建web页面,我们现在甚至可以与新的HTML元素,如建立交互式UI <对话框> 与JavaScript API。请注意,这个元素是实验,还没有准备好生产, 在Chrome与实验工作功能的启用 chrome: / /旗帜页面。