菜单

初探HTML5.x新特色《dialog》标签

2019年1月22日 - 金沙前端

总结

说了如此多,不如自己其实演练一番,小编也做了一个
demo,欢迎参考

1 赞 2 收藏
评论

图片 1

由此::backdrop伪元素可以为背景遮罩设置样式

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

近来大家的模态框看起来就漂亮多了

图片 2

末尾效果.png

眼前早就落到实处了打开和关闭的切换,那么哪些促成点击模块框外面关闭模态框呢?可能这一部分看起来相比较复杂一些,但是其实也卓殊的简要。默许状态下大家体现的是由一个DIV已毕的蒙层,但是一旦大家将DIV也换成一个label呢?那应该就跟关闭按钮的逻辑一样了。
除此以外,为了使得大家的模块框可以适应点击模块框外部关闭或者不关门二种情状,大家还足以接纳css的属性接纳器来已毕效益的开关。上边是大家最终的html和css。

  1.show.bs.modal在显示从前接触

样式

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

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
`::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 里添加越来越多的始末,一般包含 headerbody
footer

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很粗略用起来也不行顺手。
Usage

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>

  4.hidden.bs.modal在隐藏之后触发

最后,在添加一些 CSS,你就能获取你想要的

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

明天大家能够看出模态主体部分以及背景蒙版的体制了。

图片 3

基本样式.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,如:

  3.data-show:早先化时是还是不是出示默许值为true即初阶时呈现,data-show=”false”则初始化时不显得第两回点击触发元素准备模态窗,在点击三遍开始显示模态窗

浏览器协助和 Polyfill

目前,只有 chrome 支持 “

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

图片 4

上图为 caniuse.com 关于 dialog
特性主流浏览器的匹配情形

侥幸的是,我们得以行使
dialog-polyfill
来缓解那种两难,它既提供了 JavaScript
的表现,也包含了默许的样式,大家可以选拔 npm 来安装它,也得以行使 `
标签来引用它。目前,它已支持各主流浏览器,包括
IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需求使用下边语句举行初步化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

与此同时,它并不会代替浏览器原生的表现

close()则会删除open属性即潜伏,close是足以传参的像这么:modal.close(‘some
return value’)。传入的值可以透过modal.returnValue获取。

在网页中我们平日会用到模态框,一般会用来浮现表单或者是提醒新闻。由于模态框涉及到页面上相比较多的竞相功能,最不难易行的竞相就是开辟以及关闭五个操作,而倒闭又会波及是还是不是要求在开拓状态下点击模态框外部可以关闭那样的机能,因为那一个交互问题,所以一般都会首先考虑到应用JavaScript落成。不过大家也足以应用纯CSS来兑现。

  2.shown.bs.modal在浮现之后触发

基本操作

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 元素举行互相

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

HTML

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

你或许感兴趣的稿子:

进阶操作

见怪不怪,大家期望能从 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’);
    }
});

本来,那不是两全的,但它的确是立竿见影的,假若您有更好的办法,欢迎在两道三科中调换

在低版本的浏览器是不辅助伪元素的,polyfill会添加一个新的元一向担任backdrop。样式上得再增加:

伊始落到实处:

越来越多内容请点击专题《Bootstrap
Modal使用教程》进行学习,希望大家喜欢。

同台来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 ·
dialog

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

图片 5

不到一个月前,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 渲染如下

图片 6

绝对定位 于页面之上,如同大家希望的同样,出现在情节的顶端,并且
水平居中,默许意况下,它 和内容一样宽

HTML5.2出席了一个新的因素dialog,表示一个会话框或其余交互式组件,书写的时候无法省略为止标签。API很粗略用起来也格外顺手。

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

模态弹窗

// display returnValuemodal.addEventListener(‘close’, () => { 
returnSpan.innerHTML = modal.returnValue;});//
escmodal.addEventListener(‘cancel’, () => {// something});

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

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

  3. 采纳css中的:checked伪类选拔器根据checkbox是或不是被选中切换页面元素的体裁

  4. 动用css的性质采取器来添加多效应开关

  假若我们在模态窗中使用了input表单元素,假使须要在每一趟突显模态窗是input可以博得关节,就必要利用shown.bs.modal了

notes:

率先大家先写出中央构造

  可以通过modal-sm和modal-lg改变弹窗的尺寸,那多个class要安装在modal-dialog那一层

Polyfill

落到实处思路:

  弹窗内容要正确嵌套,弹窗的出现和藏身的卡通片要设置在最外层

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图