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

          <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>

        