最低HTML 5版本

Question

如何淡入HTML5对话框？对话我指的是HTML5 <dialog>代码（http://demo.agektmr.com/dialog/）。

我尝试了以下（http://jsfiddle.net/v6tbW/）但由于某种原因转换不起作用。

HTML

<dialog id="myDialog">
    Test
</dialog>

<script>
     document.getElementById('myDialog').show(); // note that this is a method of <dialog>, this is not a jQuery method.
</script>

CSS

dialog {
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;

    visibility:hidden;
    opacity:0;
    transition:visibility 10s linear 10s,opacity 10s linear;
}

dialog[open] {   
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

.backdrop {
    position: fixed;
    background: rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

如果在元素上设置display: block，则可以转换元素（并允许将此样式的时间应用于元素）。

演示：http://jsfiddle.net/v6tbW/11/

要对.showModal()执行此操作，遗憾的是，转换似乎不仅适用于[open]属性。如果你添加另一个类，它们似乎可以工作：

http://jsfiddle.net/karlhorky/eg4n3x18/

Answer 2

最低HTML 5版本

下面的示例的好处是不需要依赖项或外部脚本。 <dialog>标签在用showModal打开时很方便，因为它在声明的DOM顶部显示了背景，即使display: relative | absolute在其直接父标签上也是如此。

dialog {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
dialog[open] {
  opacity: 1;
  pointer-events: inherit;
}
dialog::backdrop {
  background-color: rgba(0,0,255, 0.2);
}

<button onclick="dialog.showModal()">show dialog</button>
<dialog id="dialog">
  <p>hi i'm a dialog!</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

将<form>与method=dialog配合使用即可完成模式的关闭，而无需处理close事件。

这两个参考文献最有启发性：

https://css-tricks.com/some-hands-on-with-the-html-dialog-element/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

结束点

截至2020年1月6日，Safari通常不支持此功能
这使React门户出于模式目的而过时了

Answer 3

因为您正在使用jQuery。这是一个更容易的方法：

http://jsfiddle.net/v6tbW/3/

<强> HTML

<dialog id="myDialog">
    Test
</dialog>

<强> CSS

dialog {
    display: none;
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

<强>的jQuery

$(function() {

    $('#myDialog').fadeIn(10000);

});

Answer 4

这是一个使用css转换的工作示例和适当的jquery选择器，添加＆＃34; no-ninja＆＃34;你的DIV上课，在窗口加载事件：

http://jsfiddle.net/v6tbW/6/

HTML：

<dialog id="myDialog">
 Test
</dialog>

的CSS：

dialog {
 position: absolute;
 left: 0; right: 0;
 margin: auto;
 border: solid;
 padding: 1em;
 background: red;
 color: black;
 dispaly:block;

 width: -moz-fit-content;
 width: -webkit-fit-content;
 width: fit-content;

 height: -moz-fit-content;
 height: -webkit-fit-content;
 height: fit-content;

 /*visibility:hidden;*/
 opacity:0;
 -webkit-transition: opacity 10s linear;
}

dialog[open] {   
 visibility:visible;
 opacity:1;
 transition-delay:0s;
} 

.backdrop {
 position: fixed;
 background: rgba(0,0,0,0.1);
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

.no-ninja{
  opacity:1;
}

JS：

$("#myDialog").addClass('no-ninja');

如何淡入HTML5对话框？

4 个答案:

最低HTML 5版本