金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > modal模态弹窗使用小结,中新的原生元素金沙棋牌

modal模态弹窗使用小结,中新的原生元素金沙棋牌

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-09-11 23:23

一起来看 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很简单用起来也非常顺手。

开始实现:

<button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button>

最后,在添加一些 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>

 <div class="modal fade" id="modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" data-dismiss="modal">&times</button>
 title
 </div>
 <div class="modal-body">
 this is main content
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">cancel</button>
 <button class="btn btn-success">ok</button>
 </div>
 </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,如:

  触发元素的关键属性为data-target和data-toggle,data-target和具体的弹窗互相对应,data-toggle="modal"提供了HTML触发条件

此标签包含所有全局属性,除了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。

  可以通过modal-sm和modal-lg改变弹窗的大小,这两个class要设置在modal-dialog那一层

该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>

  modal-header中的关闭按钮的关键属性为class="close"该class实现了样式的改变,data-dismiss="modal"提供了HTML关闭的触发条件

默认水平居中,宽高适配文字内容

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: 多模态框实现

模态弹窗提供了四个属性,这四个属性通常设置在模态弹窗上class="modal"那一层(内容DOM的最外层),四个属性分别为:

JavaScript有几个方法和属性可以使dialog 元素容易处理。你可能最需要的三种方法是showModal(),show()和close()。

  1.data-backdrop:是否包含一个背景,默认值为true同时单击背景可以关闭模态窗,设置为data-backdrop="static"则单击背景时不关闭,设置为backdrop="false"则不存在背景

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

  2.data-keyboard:按下ESC时是否关闭模态窗默认值为true即按下时关闭模态窗,设置为data-keyboard="false"则在点击ESC时不再关闭模态窗(该属性要想生效要在最外层设置属性tabindex)

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

  3.data-show:初始化时是否显示默认值为true即初始时显示,data-show="false"则初始化时不显示第一次点击触发元素准备模态窗,在点击一次开始显示模态窗

show()和showModal一样打开对话框,但是有区别在于show方法的打开的模态框是没有背景遮罩的。showModal的方式打开会有一个透明的遮罩层,且这个遮罩层可以通过::backdrop设置样式的。

  4.href:加载其他内容

close()则会删除open属性即隐藏,close是可以传参的像这样:modal.close('some return value')。传入的值可以通过modal.returnValue获取。

JS使用方法

当然还有可以用的事件close。

  模态窗提供了四个事件:

close: 当modal关闭的时候触发

  1.show.bs.modal在显示之前触发

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

  2.shown.bs.modal在显示之后触发

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

  3.hide.bs.modal在隐藏之前触发

notes:

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

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

使用方式为:

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

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

可以监听dialog的click事件,做到点击背景遮罩就能关闭模态框(当然这个可能不是完美的玩法):

  如果我们在模态窗中使用了input表单元素,如果需要在每次显示模态窗是input可以获取焦点,就需要使用shown.bs.modal了

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

  模态弹窗也提供勒三个参数:

Browser compatibility

  1.toggle切换模态窗的显示隐藏

目前,PC端只有Chrome,Opera支持,其他的厂家也应该会很快支持。不过也不用担心,可以通过dialog-polyfill(https://github.com/GoogleChrome/dialog-polyfill) 来兼容到IE9

  2.show显示模态窗

Polyfill

  3.hide隐藏模态窗

安装的方式可以通过npm也可以通过常规的script标签来引入。当使用polyfill的时候,每个对话框都需要初始化一次。

使用方式为:

dialogPolyfill.registerDialog(modal);

$("#modal").modal("show")

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

  模态窗提供的四个属性同样可以通过JS方式来使用,用JS使用时四个属性分别为:backdrop、keyboard、show、remote

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

  使用方式为:

$("#modal").modal({
 backdrop:"static",
 keyboard:false,
 show:false
})

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

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

版权声明:本文内容由互联网用户自发贡献,版权归作者所有,本社区不拥有所有权,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

原文链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
  • Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
  • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
  • Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
  • bootstrap实现弹窗和拖动效果
  • 全面解析Bootstrap弹窗的实现方法
  • weebox弹出窗口不居中显示的解决方法

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:modal模态弹窗使用小结,中新的原生元素金沙棋牌

关键词: