dialog元素表单提交自动关闭演示页面

展示

代码

• HTML：

  <button class="button" onclick="dialog.show();">点击显示弹框</button>
  <p><output id="output">&nbsp;</output></p>
  <dialog id="dialog">
      <form id="form">
          <p><input placeholder="请输入姓名" required /></p>
      </form>
      <form>
          <button class="button" form="form">确定</button>
          <button class="button normal" formmethod="dialog" value="cancel">取消</button>
      </form>
  </dialog>

• JS：

  form.addEventListener('submit', function (event) {
     event.preventDefault();
     dialog.close('submit');
  });
  dialog.addEventListener('close', () => {
     output.textContent = 'returnValue: ' + dialog.returnValue;
  });