您的位置:首页> 前端教程> HTML教程
文章导航

HTML <dialog> 标签

2019-7-31 21:38| 作者: admin| 查看: 1840| 评论: 0|来自: 蚂蚁部落

<dialog>是HTML5新增的语义化标签之一。

关于语义化标签的概念与作用可以参阅HTML 语义化布局一章节。

一.<dialog>标签作用:

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

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

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

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

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

二.代码实例:


[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
dialog p{
  text-align: center;
}
</style>
</head>
<body>
  <dialog open>
    <p>蚂蚁部落</p>
  </dialog>  
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/31/213920gzxghzvxxce0ewun.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=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;
  });
}
</script>  
</head>
<body>
<dialog id="favDialog">
  <form method="dialog">
    <menu>
      <button id="cancelBtn" value="取消">取消</button>
      <input type="submit" id="confirmBtn" value="确定">
    </menu>
  </form>
</dialog>
<menu>
   <button id="show">显示对话框</button>
</menu>
<div id="ant"></div>
</body>
</html>

上述代码是<dialog>与<form>元素的结合应用,代码分析如下:

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

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

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

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

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

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


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML <aside> 标签下一篇:HTML <time> 标签

最新评论

返回顶部