• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <dialog>

    版本:HTML5

    HTML <dialog>元素表示一个对话框或其他交互式组件,例如一个检查器或者窗口。

    浏览器支持

    目前,只有 Chrome 和 Safari 6 支持<dialog>标签。

    示例

    <dialog open>
      <p>greetings, one and all!</p>
    </dialog>
    

    greetings, one and all!

    标签定义及使用说明

    • <dialog>标签定义一个对话框、确认框或窗口。
    • <form>元素可在此对话框中使用,但需要指定属性method="dialog"。当提交表单时,对话框的returnValue属性将会等于表单中被使用的提交按钮的value
    • ::backdropCSS 伪元素可用于更改<dialog>背景元素样式,例如在对话框被打开激活时,调暗背景中不可访问的内容。仅当使用HTMLDialogElement.showModal()显示对话框时才会绘制backdrop 背景。
    Content categories流式内容元素,sectioning root
    Permitted content流式内容元素
    Tag omission不允许,开始标签和结束标签都不能省略。
    Permitted parents可接受的任何元素flow content
    Permitted ARIA rolesalertdialog
    DOM接口HTMLDialogElement

    属性

    属性描述
    open HTML5新增open规定 dialog 元素是有效的,用户可以与它进行交互。

    这个元素包含了全局属性。但是tabindex特性不能被使用在<dialog>元素上。

    • open指示这个对话框是激活的和能互动的。当这个open特性没有被设置,对话框不应该显示给用户。

    HTML 4.01 与 HTML 5 之间的差异

    <dialog>标签是 HTML 5 中的新标签。

    全局属性

    <dialog>标签支持HTML 的全局属性。

    事件属性

    <dialog>标签支持HTML 的事件属性。

    例子

    <dialog>
      <dt>老师</dt>
      <dd>2+2 等于?</dd>
      <dt>学生</dt>
      <dd>4</dd>
      <dt>老师</dt>
      <dd>答对了!</dd>
    </dialog>
    

    使用<dialog>元素:

    <table border="1">
    <tr>
    <th>january <dialog open>this is an open dialog window</dialog></th>
    <th>february</th>
    <th>march</th>
    </tr>
    <tr>
    <td>31</td>
    <td>28</td>
    <td>31</td>
    </tr>
    </table>

    当单击“更新详细信息”按钮时,此示例打开一个包含一个表单的弹出对话框。

    //html
    
    <!-- simple pop-up dialog box containing a form -->
    <dialog id="favdialog">
      <form method="dialog">
        <p><label>favorite animal:
          <select>
            <option></option>
            <option>brine shrimp</option>
            <option>red panda</option>
            <option>spider monkey</option>
          </select>
        </label></p>
        <menu>
          <button value="cancel">cancel</button>
          <button id="confirmbtn" value="default">confirm</button>
        </menu>
      </form>
    </dialog>
    
    <menu>
      <button id="updatedetails">update details</button>
    </menu>
    
    <output aria-live="polite"></output>
    

    JavaScript

    (function() {
      var updatebutton = document.getelementbyid('updatedetails');
      var favdialog = document.getelementbyid('favdialog');
      var outputbox = document.getelementsbytagname('output')[0];
      var selectel = document.getelementsbytagname('select')[0];
      var confirmbtn = document.getelementbyid('confirmbtn');
    
      // “update details” button opens the <dialog> modally
      updatebutton.addeventlistener('click', function onopen() {
        if (typeof favdialog.showmodal === "function") {
          favdialog.showmodal();
        }
     else {
          alert("the dialog api is not supported by this browser");
        }
      }
    );
      // "favorite animal" input sets the value of the submit button
      selectel.addeventlistener('change', function onselect(e) {
        confirmbtn.value = selectel.value;
      }
    );
      // "confirm" button of form triggers "close" on dialog because of [method="dialog"]
      favdialog.addeventlistener('close', function onclose() {
        outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring();
      }
    );
    }
    )();
    
    

    上篇:<details>

    下篇:<summary>