128
模态窗口的一个最常见的用户界面,我们松阳公司网站建设可以在网站找到的。 它通常用于携带订阅表格,上传形式(如在WordPress),显示通知和其他方法来画一个游客的关注重要的事情。
这么长时间,我们使用jQuery插件 jQuery UI对话框 , Twitter引导模式 ,或 Popeasy 创建一个。 但HTML5已经引入了一个新标签 <对话框> 允许我们创建一个本机模式窗口容易得多。
使用 <对话框> 元素是一样的我们如何使用其他HTML元素。 只需添加内容要显示在对话框窗口中,。
1 2 3. 4 5 6 | <对话框 id=“窗口”> <h3> Hello World ! < /h3> <p> Lorem ipsum悲哀坐amet, consectetur adipisicing elit。 Earum, inventore ! < /p> <按钮 id=“退出”> < /退出按钮> 对话框> <按钮 id=“秀”< / >显示对话框按钮> |
但是请注意,当你把它在Chrome(目前只支持这个标签的浏览器)隐藏对话框窗口。 鉴于上面的HTML结构,我们只会看到的 显示对话框 按钮。 显示对话框窗口我们可以用它的JavaScript API ,告诉() ,并使用 .close () 隐藏它。
1 2 3. 4 5 6 7 8 9 | (函数(){ var 对话框= . getelementbyid (“窗口”); . getelementbyid (“显示”)。 onclick =函数(){ dialog.show (); }; . getelementbyid (“退出”)。 onclick =函数(){ dialog.close (); }; })(); |
点击 “显示对话框” 按钮,对话框窗口将显示在浏览器窗口的中间。
我们松阳公司网站建设可以通过CSS定制对话框窗口。 默认情况下,对话框窗口覆盖整个水平空间在浏览器中。 所以,让我们指定宽度,。
1 2 3. | 对话框{ 宽度:500 px; } |
此外, <对话框> 元素提供了一个新的伪元素 ::背景 。 它用于风格典型暗淡的背景,我们通常发现背后一个对话框窗口。 它让游客更加关注其背后的对话框和隐藏一切。 它似乎没有工作,但是在未来将支持。
HTML已经发展在过去的几年里。 它不再是只对构建web页面,我们现在甚至可以与新的HTML元素,如建立交互式UI <对话框> 与JavaScript API。 请注意,这个元素是实验,还没有准备好生产, 在Chrome与实验工作功能的启用 chrome: / /旗帜 页面。
热门分享
最新文章
随机推荐