你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

HTML5的dialog API 4个回复 专栏 @ HTML

weifengsn 发布于 1 年前

dialog标签

dialog标签用于弹出浮层操作,传统开发中弹出层基本上都是通过javascript或者通过一些框架创建,但是现在HTML5(确切的说是5.1)提供了原生的支持,创建浮层更加简单切富有语义化。

dialog标签用法

html部分

<dialog id="dialog">
  <h3>Are you sure?</h3>
  <p>You’ve pressed a big red button. It might do… something.
  <div>
    <button id="okay">Okay, go ahead</button>
    <button id="cancel">Cancel</button>
  </div>
</dialog>

浏览器默认不会展示<dialog>标签,可以通过以下方法进行展示

  • 添加open属性<dialog id="dialog" open>
  • 通过js操控 document.getElementById('dialog').show() (showModal也可以,下面将介绍这俩的区别)

当你通过以上方法(添加open属性/show方法)使dialog显示的时候,你会发现dialog显示在浏览器最上面。你依然可以跟dialog以外的内容进行交互。
当通过showModal来显示dialog的时候你会发现dialog显示在正中间,另外你还会发现不可以跟dialog以外的内容进行交互了,这就是showModalshow的区别了。

通过show打开:

通过showModal打开:

操控以及关闭dialog

理论上,dialog标签里面可以包含任何你想要的内容:video,form或者其他元素等等,你可以使多个dialog同时展示,但是modal dialog只能有一个
可以通过以下方法关闭dialog

dialog.close();

dialog也可以通过CSS来控制

dialog {
  font-family: Avenir, sans-serif;
  width: 25%; text-align: center; border: 3px solid; 
}
dialog div { 
  display: flex; justify-content: space-between;
}

对于永showModal打开的dialog,可以通过以下方式更改遮罩层的样式:

dialog::backdrop { 
  background: rgba(0,0,0,0.9); 
}

效果图:

需要注意的是<dialog>层出现在浏览器的最上层,没有任何元素可以通过设置z-index的值来覆盖它。另外<dialog>也不会继承父元素的任何样式。

dialog的兼容性

目前dialog还没有得到浏览器的广泛支持,但是可以通过Google polyfill来解决兼容性问题。

var testdialog=document.createElement("dialog");
testdialog.setAttribute("open", "");
if (testdialog.open==true){
  // browser supports the dialog element
} else {
  // browser doesn’t support the element: load a polyfill
}

dialog的应用例子

本例子将展示一个点击图片显示大图的例子。
html:

<nav id="thumbs">
  <a href="elephant.jpg"><img src="elephant-thumb.jpg" alt></a>
  <a href="taj-mahal.jpg"><img src="taj-mahal-thumb.jpg" alt></a>
  <a href="wise-man.jpg"><img src="wise-man-thumb.jpg" alt></a>
</nav>
<dialog id="cover">
  <button id="closecover">Close</button>
  <img src="" alt>
</dialog>

css:

@keyframes fadeToNearBlack {
  to { background: rgba(0,0,0,0.9); }
}
@keyframes goBig { 
  to { opacity: 1; } 
}
nav { 
  display: flex; 
} 
nav a { 
  display: block; flex: 1; 
} 
nav a img, 
dialog img { 
  width: 100%; height: auto; 
}
dialog { border: none; opacity: 0; }
dialog button { 
  border: none; background: none; font-size: 1.2rem; 
}
dialog[open] {
  animation: goBig 1s .4s forwards;
  width: 70%; margin: auto;
  position: absolute; max-width: 700px; 
}
dialog[open]::backdrop { 
  animation: fadeToNearBlack 1s forwards; 
}
.backdrop { 
  animation: fadeToNearBlack 1s forwards; 
}

javascript:

function showImage(e) {
  e.preventDefault();
  coverimage.setAttribute("src", this.getAttribute("href"));
  coverimage.setAttribute("alt", this.querySelector("img").getAttribute("alt"));
  cover.showModal();
}
document.getElementById("closecover").onclick = function() { 
  coverimage.setAttribute("src", "");
  cover.close();
}
var imglinks = document.getElementById("thumbs").getElementsByTagName('a'),
cover = document.getElementById("cover"),
coverimage = cover.getElementsByTagName("img")[0];
testdialog=document.createElement("dialog");
testdialog.setAttribute("open", "");
if (!testdialog.open) { 
  dialogPolyfill.registerDialog(cover); 
}
for (var i=0; i<imglinks.length; i++) { 
  imglinks[i].onclick = showImage; 
}

效果图:

  • weifengsn

    怎么本地写好的markdown代码缩进,到这里就没了?

    #1
  • liuyangcharlie

    @weifengsn 本地markdown用什么预览的?
    像马克飞象之类的很多编辑器语法和Github风格的语法不太一样,可能是因为这个吧

    #2
  • weifengsn

    @liuyangcharlie Cmd markdown,之前好用的,就这个文章不好用了,诡异

    #3
  • ShinePaul

    mark

    #4
登录后回复,如无账号,请使用邀请码注册