以下实例显示了一个简单的按钮，单击该按钮可通过 HTMLDialogElement.showModal() 函数打开一个包含表单的 <dialog>。在这里，您可以单击取消按钮以关闭对话框（通过 HTMLDialogElement.close() 函数），或通过提交按钮提交表单。

Web 接口
HTMLDialogElement - 提供了操作 <dialog> 元素的方法
以下实例显示了一个简单的按钮，单击该按钮可通过 HTMLDialogElement.showModal() 函数打开一个包含表单的 <dialog>。在这里，您可以单击取消按钮以关闭对话框（通过 HTMLDialogElement.close() 函数），或通过提交按钮提交表单。

            <!-- 简单弹出对话框，包含一个表单 -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
        <p><label for="favAnimal">最喜欢的动物：</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>盐水虾</option>
          <option>小熊猫</option>
          <option>蜘蛛猴</option>
        </select></p>
      </section>
      <menu>
        <button id="cancel" type="reset">取消</button>
        <button type="submit">提交</button>
      </menu>
    </form>
  </dialog>

  <menu>
    <button id="updateDetails">更新详情</button>
  </menu>

  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if(dialog.open) {
          console.log('打开对话框');
        } else {
          console.log('关闭对话框');
        }
      }

      // 点击按钮将打开一个模式对话框
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

      // 点击表单取消按钮关闭对话框
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });

    })();
  </script>

        

以下实例显示了一个简单的按钮，单击该按钮可通过 HTMLDialogElement.showModal() 函数打开一个包含表单的 <dialog>。在这里，您可以单击 取消 按钮以关闭对话框（通过 HTMLDialogElement.close() 函数），或通过 提交 按钮提交表单。