韦德国际1946英国 > 计算机网络 > 一起来看,纯CSS实现带点击模态框外部自动关闭

原标题:一起来看,纯CSS实现带点击模态框外部自动关闭

浏览次数:179 时间:2019-04-21

进阶操作

平凡,大家愿意能从 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');
    }
});

当然,那不是巨细无遗的,但它确实是实惠的,假使您有更加好的不二等秘书籍,接待在争执中沟通

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

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: 多模态框达成

样式

开发和关闭模态框是最大旨的,但那是必定不够的,``

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素 `::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>

当然还有能够用的风云close。

先是大家先写出焦点结构

总结

说了如此多,不比自身其实演习1番,作者也做了三个 demo,迎接参考

1 赞 2 收藏 评论

图片 1

Browser compatibility

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;
}

当今我们能够看到模态主体部分以及背景蒙版的体裁了。

图片 2

基本样式.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;
一起来看,纯CSS实现带点击模态框外部自动关闭的模态框。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;
}

目前我们能够完成点击复选框打开模态框了,不过张开之后我们关闭持续,所以我们要求让展开的弹框能够关闭,接下去只需求做一件业务,正是在展开的模态框中再加多2个label,如:

浏览器支持和 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);

同时,它并不会庖代浏览器原生的一举一动

版权注解:本文内容由互连网用户自发进献,版权归小编全体,本社区不具有全数权,也不肩负有关法律义务。要是您开掘本社区中有提到抄袭的内容,接待发送邮件至:yqgroup@service.aliyun.com 实行揭示,并提供相关证据,①经查实,本社区将及时删除涉嫌侵权内容。

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>

如此那般基本的开采以及关闭模态框的相互就完事了,让大家再轻巧优化一下体制,使其看起来至少赏心悦目一些

一路来看 HTML 五.二 中新的原生成分 dialog

2018/01/20 · HTML5 · dialog

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

图片 4

不到三个月前,HTML 5.2 正式成为 W3C 的推荐介绍标准(REC),其中,推出了八个新的原生模态对话框成分,乍一看,也许感到它便是3个增加产量的要素,可是,作者近日在玩的时候,开掘它确实是2个值得期待和很有意思的因素,在此地享用给我们

这是 `` 最基础的言传身教

XHTML

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

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

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

图片 5

绝对定位 于页面之上,就像我辈愿意的如出1辙,出现在内容的顶端,并且 水平居中,暗中认可意况下,它 和内容一样宽

完整的demo在这里(https://codepen.io/keithjgrant/pen/eyMMVL?editors=0101)

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>

基本操作

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 成分进行互动

dialogPolyfill.registerDialog(modal);

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

  2. 行使label来切换checkbox的当选状态

  3. 选择css中的:checked伪类选择器根据checkbox是不是被入选切换页面成分的体制

  4. 选用css的性情采纳器来添扩充功用开关

最后,在累加一些 CSS,你就能收获你想要的

constmodal =document.querySelector('dialog');modal.showModal();modal.close();

落到实处思路:

showModal()会增添open属性即打开对话框。

HTML

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

在网页中我们平时会用到模态框,一般会用于体现表单或许是提醒音讯。由于模态框涉及到页面上相比较多的竞相成效,最简便易行的并行正是开采以及关闭八个操作,而关门大吉又会涉及是不是须要在开荒状态下点击模态框外部能够关闭那样的效果,因为这个交互难点,所以一般都会首先怀念到应用JavaScript达成。不过大家也得以运用纯CSS来贯彻。

私下认可水平居中,宽高适配文字内容

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

目前已经落到实处了展开和关闭的切换,那么哪些兑现点击模块框外面关闭模态框呢?或许那1部分看起来相比复杂一些,可是事实上也十二分的差不离。暗中认可状态下大家显示的是由2个DIV达成的蒙层,不过只要咱们将DIV也换到二个label呢?那应该就跟关闭按键的逻辑同样了。
除此以外,为了使得我们的模块框能够适应点击模块框外部关闭大概不休息二种状态,我们还可以动用css的属性采取器来达成效益的开关。上面是大家最后的html和css。

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

开首落到实处:

初稿链接

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:一起来看,纯CSS实现带点击模态框外部自动关闭

关键词: 日记本 程序员 HTML5

上一篇:别人家的面试题,一个整数是否是

下一篇:没有了