dialog中加载html,HTML <dialog> 标签

``是HTML5新增的语义化标签之一。

**一.标签作用：**

``标签可以创建一个具有一定动态效果和交互能力的对话框。

此标签需要注意两个属性的应用：

(1).此标签上不能使用tabindex属性。

(2).如果设置open属性，标签产生的对话框处于显示状态。

特别说明：此标签当前可能存在较大的浏览器兼容性问题，所以谨慎使用。

**二.代码实例：**

```html

先思考后编码

dialog p{

text-align: center;

}

先思考后编码

```

给``添加open属性即可让其处于显示状态，不需要任何多余的属性值。

```html

先思考后编码

window.οnlοad=function(){

let favDialog=document.getElementById("favDialog");

let cancelBtn=document.getElementById("cancelBtn");

let confirmBtn=document.getElementById("confirmBtn");

let show=document.getElementById("show");

let ant=document.getElementById("ant");

show.addEventListener('click', function() {

favDialog.showModal();

});

favDialog.addEventListener('close', function onClose() {

ant.innerHTML=favDialog.returnValue;

});

}

取消

显示对话框

```

上述代码是``与``元素的结合应用，代码分析如下：

(1).form元素可以嵌套在dialog 元素之中，

(2).将form的method属性值设置为"dialog"即可将它们关联起来。

(3).当点击能够使表单提交的按钮，比如本代码中的submit按钮或者button按钮，能够将对话框隐藏。

(4).但是要注意的是，点击上述按钮并没有提交动作，因为method属性值是"dialog"。

(5).此时，会将对话框的returnValue值设置为提交按钮的value属性值。

也就是说点击哪个按钮会使对话框隐藏，也就是会将哪个按钮的value属性值设置为对话框的returnValue值。