betway必威-betway必威官方网站
做最好的网站

纯CSS实现带点击模态框外部自动关闭的模态框,

一同来看 HTML 5.2 中新的原生成分 dialog

2018/01/20 · HTML5 · dialog

原稿出处: Kirsty TG   译文出处:Keith   

必威官方网站 1

不到贰个月前,HTML 5.2 正式成为 W3C 的引入标准(REC),个中,推出了二个新的原生模态对话框成分,乍一看,也许认为它就是叁个剧增的成分,不过,我近日在玩的时候,开掘它确实是三个值得期望和很有趣的要素,在此处分享给大家

这是 `` 最基础的身先士卒

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可知的,若无 opendialog 将会隐敝,你能够使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

必威官方网站 2

绝对定位 于页面之上,就疑似小编辈期望的同样,出现在故事情节的最上端,而且 水平居中,暗许情状下,它 和内容一样宽

摘要: HTML5.2参加了贰个新的要素dialog,表示叁个会话框或任何交互式组件,书写的时候无法省略截至标签。API很轻巧用起来也特别顺手。 Usage

在网页中大家平常会用到模态框,日常会用于体现表单或许是提醒新闻。由于模态框涉及到页面上很多的互相成效,最简便易行的互动就是开采以及关闭五个操作,而关门大吉又会提到是不是需求在开垦状态下点击模态框外界能够关闭这样的效用,因为那个交互难点,所以日常都会首先思考到利用JavaScript完毕。不过大家也能够采取纯CSS来完毕。

基本操作

JavaScipt 有几个 方法属性 可以很方便地管理 dialog 成分,使用最多的大概依旧 showModal()close()

const modal = document.querySelector('dialog'); // makes modal appear (adds `open` attribute) modal.showModal(); // hides modal (removes `open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector('dialog');
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你采用 showModal() 来打开 dialog 时,将会在 dialog 周围加一层阴影,阻止客户与 非 diglog 成分的互动,默许景况下,阴影是 完全透明 的,你能够利用 CSS 来修改它

Esc 能够关闭 dialog,你也能够提供叁个按键来触发 close()

再有二个情势是 show(),它也得以让 dialog 显现,但与 showModal() 分歧的是它从未影子,顾客能够与非 dialog 元素实行相互

老王又有的时候间能够陪女票看录制了

贯彻思路:

浏览器协理和 Polyfill

目前,只有 chrome 支持 ``

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的今天就会支撑

必威官方网站 3

上图为 caniuse.com 关于 dialog 性格主流浏览器的非常情形

幸好的是,我们得以行使 dialog-polyfill 来减轻这种狼狈,它既提供了 JavaScript 的行为,也饱含了默许的样式,我们得以选用 npm 来安装它,也得以动用 ` 标签来引用它。目前,它已支持各主流浏览器,包括IE 9` 及其以上版本

只是,在利用它时,各个 dialog 必要动用上边语句进行最早化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

还要,它并不会替代浏览器原生的作为

Attributes 此标签包涵全部全局属性,除了tabIndex open 该open属性意味着该对话框是可知的。

  1. 使用HTML中checkbox类型的input标签

  2. 动用label来切换checkbox的入选状态

  3. 应用css中的:checked伪类选择器依据checkbox是或不是被入选切换页面元素的体裁

  4. 运用css的个性选取器来添扩大效果开关

样式

张开和破产模态框是最中央的,但那是早晚非常不足的,``

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素 `::backdrop` 来优化

`` 显现时背影的体裁

dialog { padding: 0; width: 478px; text-align: center; vertical-align: middle; border-radius: 5px; border: 0; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了合营老的浏览器,使用 polyfill 时,::backdrop 是不起成效的,但 polyfill 会在 dialog 后边加多一个 .backdrop 成分,我们得以像上面那样定位它

dialog .backdrop { background-color: rgba(0, 0, 0, 0.4); }

1
2
3
dialog .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下去,是时候向 bialog 里加多越多的故事情节,平常包蕴 headerbodyfooter

XHTML

<dialog id="sweet-modal"> <h3 class="modal-header">sweet dialog</h3> <div class="modal-body"> <p>This is a sweet dialog, which is much better.</p> </div> <footer class="modal-footer"> <button id="get-it" type="button">Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

HTML5.2插足了三个新的成分dialog,表示多个对话框或别的交互式组件,书写的时候不能够省略甘休标签。API很简短用起来也不行顺手。

发端兑现:

谈到底,在累加一些 CSS,你就能够获取你想要的

Usage

先是大家先写出中央协会

晋级操作

普普通通,我们希望能从 dialog 中获得一些客户的音信。关闭 dialog 时,大家能够给 close() 传递贰个 string,然后通过 dialog 元素的 returnValue 属性来赢得

modal.close('Accepted'); console.log(modal.returnValue); // logs `Accepted`

1
2
3
modal.close('Accepted');
 
console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的事件大家得以监听,在那之中,最常用的也许是 close(关闭 dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

别的,大家大概还愿意点击 dialog 旁边的阴影来关闭,当然,那也可能有化解办法的。点击阴影会触发 dialog 的点击事件,如若 dialog 的子成分占满了全副 dialog,那么大家能够透过监听 dialog 的点击,当 targetmodal 时来关闭它

modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); } });

1
2
3
4
5
modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.close('cancelled');
    }
});

理所必然,那不是圆满的,但它真的是卓有效能的,假设你有更加好的措施,招待在商议中交流

老王又不经常间能够陪女盆友看电影了

HTML

<div id="modal" class="modal__wrapper">
<div class="modal">
<div class="modal__main">
<p> 模态框内容 </p>
</div>
</div>
</div>

总结

说了如此多,不及本人其实演习一番,小编也做了二个 demo,欢迎仿效

1 赞 2 收藏 评论

必威官方网站 4

Attributes

CSS:

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
}

今昔大家能够见到模态主体部分以及背景蒙版的体裁了。

必威官方网站 5

基本样式.png

接下去让大家给那一个模态框增添按钮
将HTML改为:

<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">展开模态框</label>
<div class="modal">
<div class="modal__body">
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

将模态框的发端状态改为遮盖,并在checkbox选中时显得

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
必威官方网站,.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked label{
display: none;
}
.modal__state:checked label .modal,
.modal__state:checked label .modal .modal-overlay{
display: block;
}

现阶段我们得以兑现点击复选框展开模态框了,可是张开今后大家关闭持续,所以我们必要让展开的弹框能够关闭,接下去只要求做一件工作,正是在开拓的模态框中再加多三个label,如:

此标签包涵全体全局属性,除了tabIndex

HTML

<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">张开模态框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">关闭模态框</label>
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

那般中央的开发以及关闭模态框的相互就达成了,让咱们再简单优化一下样式,使其看起来至少雅观一些

open

CSS

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked label{
display: none;
}
.modal__state:checked label .modal,
.modal__state:checked label .modal .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}

前些天我们的模态框看起来就美丽多了

必威官方网站 6

末尾效果.png

眼前早已实现了开采和倒闭的切换,那么怎么样促成点击模块框外面关闭模态框呢?或者那有的看起来相比较复杂一些,可是实际上也不行的简约。默许状态下大家显示的是由三个DIV完成的蒙层,可是借使我们将DIV也换来三个label呢?那应该就跟关闭按键的逻辑同样了。
除此以外,为了使得咱们的模块框能够适应点击模块框外界关闭可能不破产二种情况,我们还足以应用css的性子采纳器来完结效果与利益的按钮。下边是我们最终的html和css。

该open属性意味着该对话框是可知的。未有它,那几个对话框就能够暗藏起来,直到你使用JavaScript来展现它。加多别的样式在此以前,对话框呈现如下默许样式:

HTML

<div id="modal" class="modal__wrapper" outside-close>
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">展开模态框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">关闭模态框</label>
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

暗许水平居中,宽高适配文字内容

CSS样式

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked label{
display: none;
}
.modal__state:checked label .modal,
.modal__state:checked label .modal .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}
.modal__wrapper[outside-close] .modal__state:checked label .modal .modal-overlay {
display: none;
}
.modal__wrapper[outside-close] .modal__state:checked label.modal__toggle--outside{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: block;
transform: translate(0, 0);
margin-top: 0;
color: transparent;
}

方今的这种实现目前只适用于页面上只有二个模态框的情景,假设供给完结多少个也是唯恐的,只供给做几个简易的改造就可以完结。

Demo 1: 单模态框实现
Demo 2: 多模态框完成

JavaScript有多少个议程和性质能够使dialog 成分轻巧管理。你大概最供给的二种办法是showModal(),show()和close()。

本文由betway必威发布于网页设计,转载请注明出处:纯CSS实现带点击模态框外部自动关闭的模态框,

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。