糖果派对官方网站_可以赌钱的糖果游戏_手机版
bb电子糖果派对纯CSS实现带点击模态框外界自动关闭的模态框

bb电子糖果派对纯CSS实现带点击模态框外界自动关闭的模态框

作者:Web前端    来源:未知    发布时间:2020-01-03 05:15    浏览量:

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

2018/01/20 · HTML5 · dialog

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

bb电子糖果派对 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 渲染如下

bb电子糖果派对 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` 在不久的未来就能支撑

bb电子糖果派对 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 收藏 评论

bb电子糖果派对 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;
}

现行反革命我们能够见到模态主体部分以致背景蒙版的体裁了。

bb电子糖果派对 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;
}

今昔大家的模态框看起来就雅观多了

bb电子糖果派对 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(State of Qatar,show(卡塔尔和close(卡塔尔。

上一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.tk-web.com. bb电子糖果派对有限公司 版权所有