当单击 “更新详情” 按钮时，该示例打开包含表单的弹出对话框。

<dialog open id="fav-dialog">

  <form method="dialog">

    <section>

      <p><label for="fav-animal">喜欢的动物：</label>

      <select id="fav-animal">

        <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="update-details">更新详情</button>

</menu>

​

<script>

(function() {

  var updateButton = document.getElementById('update-details');

  var cancelButton = document.getElementById('cancel');

  var favDialog = document.getElementById('fav-dialog');

​

  // 点击按钮打开模态对话框

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

    favDialog.showModal();

  });

​

  // 点击表单取消按钮关闭对话框

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

    favDialog.close();

  });

})();

</script>

​