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

2019-03-28 18:17栏目:ca888圈内

浏览器帮忙和 Polyfill

目前,只有 chrome 支持 ``

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

ca888会员登录 1

上图为 caniuse.com 关于 dialog 天性主流浏览器的杰出情形

幸亏的是,大家得以选择 dialog-polyfill 来缓解那种两难,它既提供了 JavaScript 的表现,也蕴藏了私下认可的样式,大家能够使用 npm 来安装它,也得以选取 ` 标签来引用它。目前,它已支持各主流浏览器,包括IE 9` 及其以上版本

只是,在动用它时,种种 dialog 要求利用上边语句举行开首化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会顶替浏览器原生的一言一行

dialogPolyfill.registerDialog(modal);

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

今昔我们的模态框看起来就美貌多了

ca888会员登录 2

终极效果.png

时下早已落到实处了打开和关闭的切换,那么哪些促成点击模块框外面关闭模态框呢?或许这一部分看起来相比较复杂一些,可是事实上也格外的简要。私下认可状态下我们来得的是由一个DIV达成的蒙层,可是假若大家将DIV也换到二个label呢?那应该就跟关闭按钮的逻辑一样了。
其余,为了使得大家的模块框能够适应点击模块框外部关闭或然不关门两种景况,大家还能选取css的天性选取器来达成效益的开关。下边是大家最终的html和css。

上述正是本文的全体内容,希望对大家的就学抱有扶助,也希望大家多多支持脚本之家。

总结

说了这么多,比不上本身实际练习一番,笔者也做了二个 demo,欢迎参考

1 赞 2 收藏 评论

ca888会员登录 3

cancel: 当按下ESC关闭模态框的时候接触

在网页中我们日常会用到模态框,一般会用来显示表单也许是提示音讯。由于模态框涉及到页面上比较多的互动功效,最不难易行的竞相就是开辟以及关闭八个操作,而倒闭又会涉及是或不是必要在打开状态下点击模态框外部能够关闭这样的效能,因为这几个交互难点,所以一般都会率先考虑到应用JavaScript实现。不过大家也足以使用纯CSS来兑现。

  1.show.bs.modal在展现此前接触

最终,在加上一些 CSS,你就能取得你想要的

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

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

今昔的那种完成如今只适用于页面上唯有3个模态框的地方,假设急需贯彻三个也是只怕的,只要求做多少个差不多的更改即可兑现。

Demo 1: 单模态框完结
Demo 2: 多模态框完成

  若是我们在模态窗中使用了input表单成分,倘若须求在每便呈现模态窗是input能够拿走关节,就供给利用shown.bs.modal了

联合来看 HTML 5.2 中新的原生成分 dialog

2018/01/20 · HTML5 · dialog

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

ca888会员登录 4

不到2个月前,HTML 5.2 正式成为 W3C 的引进标准(REC),在那之中,推出了3个新的原生模态对话框元素,乍一看,或许感觉到它正是二个激增的因素,不过,小编如今在玩的时候,发现它确实是二个值得期待和很有意思的成分,在此间分享给大家

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

XHTML

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

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

其中,open 属性表示此时 dialog 是可知的,倘若没有 opendialog 将会暗藏,你可以采取 JavaScipt 将它显现出来,此时,dialog 渲染如下

ca888会员登录 5

绝对定位 于页面之上,仿佛作者辈目的在于的一致,现身在内容的上边,并且 水平居中,暗中同意意况下,它 和内容一样宽

JavaScript有多少个章程和性质可以使dialog 成分不难处理。你或者最亟需的三种办法是showModal(),show()和close()。

首先大家先写出中央组织

JS使用办法

样式

打开和关闭模态框是最中央的,但那是早晚不够的,``

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

老王又有时间能够陪女朋友看电影了

始发兑现:

$("#modal").on("shown.bs.modal",function(){
 alert("already show")
})

基本操作

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()

再有3个办法是 show(),它也可以让 dialog 显现,但与 showModal() 不一样的是它从不影子,用户能够与非 dialog 成分实行交互

自然还有能够用的风浪close。

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>

  弹窗内容要科学嵌套,弹窗的产出和隐身的动画片要安装在最外层

进阶操作

一般而言,大家希望能从 dialog 中获得一些用户的消息。关闭 dialog 时,大家能够给 close() 传递1个 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');
    }
});

自然,那不是宏观的,但它确实是卓有功能的,即便你有更好的法子,欢迎在评价中调换

该open属性意味着该对话框是可知的。没有它,那一个对话框就会隐藏起来,直到你利用JavaScript来体现它。添加任何样式在此以前,对话框突显如下暗中同意样式:

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

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

ca888会员登录 6

基本样式.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;
}

方今我们能够兑现点击复选框打开模态框了,不过打开现在大家关闭持续,所以大家要求让打开的弹框能够关闭,接下去只供给做一件事情,就是在开辟的模态框中再添加1个label,如:

模态弹窗

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

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

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

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

  4. 应用css的习性选用器来添加多职能开关

  2.show体现模态窗

close()则会去除open属性即潜伏,close是足以传参的像那样:modal.close('some return value')。传入的值可以经过modal.returnValue获取。

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>
ca888会员登录,</div>

这么基本的开拓以及关闭模态框的相互就大功告成了,让我们再简单优化一下体裁,使其看起来至少美观一些

  3.hide隐藏模态窗

在低版本的浏览器是不支持伪元素的,polyfill会添加一个新的要一直担任backdrop。样式上得再加上:

福寿双全思路:

  1.data-backdrop:是不是带有二个背景,私下认可值为true同时单击背景能够关闭模态窗,设置为data-backdrop="static"则单击背景时不倒闭,设置为backdrop="false"则不存在背景

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:纯CSS实现带点击模态框外部自动关闭的模态框