HTML5 对话框元素关闭按钮无法正常工作

Question

我正在查看这个问题，但我无法将其应用到我的代码中。

这让我感到困惑，因为我对保存按钮所做的事情与我对取消按钮所做的完全相同（至少，关于它关闭的部分）并且在单击取消时没有任何反应。

<dialog class="my-modal"> 
                <p>Add Cust</p>
                <label for="nameField">Name</label><input id=nameField><br>
                <label for="addressField">Address</label><input id=addressField><br>
                <label for="cityField">City</label><input id=cityField><br>
                <label for="stateField">State</label><input id=stateField size=2> &nbsp;
                <label for="zipField">Zip</label><input id=zipField><br>

                <br>
                <button onclick="closeAndSave()">Save</button>
                <button onclick="close()">cancel</button>
            </dialog>

function close(){
    const modal = document.querySelector('.my-modal');
    modal.close();
}

也试过：

<button class="btn btn-default" data-dismiss="my-modal" aria-label="Close">Cancel</button>

Answer 1

解决此问题的另一种方法是将行为绑定到脚本中的按钮，而不是使用内联 "onclick" 属性为按钮指定功能。

"inline onclick method" 可能会导致意外行为（这可能是您遇到问题的原因）。一个例子是，如果 close() 在你的应用程序全局范围内的其他地方是 redefined/reassigned，那么这将导致 "the wrong close function" 被对话框的关闭按钮调用。

考虑修改您的 HTML 和脚本，以便将事件绑定委托给您的脚本以便更好地控制，如下所示：

/* Obtain modal as before */
const modal = document.querySelector('.my-modal')

/* Select buttons from modal and bind click behavior */
modal.querySelector("button.cancel").addEventListener("click", () => {
  /* Call close method on modal to dismiss */
  modal.close();
});

modal.querySelector("button.save").addEventListener("click", () => {
  alert("save data");
  modal.close();
});

/* Added for snippet to prelaunch dialog */
modal.showModal();

<dialog class="my-modal">
  <p>Add Cust</p>
  <label for="nameField">Name</label><input id=nameField><br>
  <label for="addressField">Address</label><input id=addressField><br>
  <label for="cityField">City</label><input id=cityField><br>
  <label for="stateField">State</label><input id=stateField size=2> &nbsp;
  <label for="zipField">Zip</label><input id=zipField><br>
  <br>
  <!-- Replace onclick with classes to identify/access each button -->
  <button class="save">Save</button>
  <button class="cancel">cancel</button>
</dialog>

希望对您有所帮助！

Answer 2

如果调用 .close() 时对话框没有消失，请检查您的样式表。

如果你有这样的事情：

dialog { display: flex; ... }

对话框“不会关闭”，因为样式声明正在选择 dialog，而不考虑其打开状态，并应用 non-none display 值。

而是使用 dialog[open] 选择器：

dialog[open] { display: flex; ... }

发生这种情况是因为用户代理样式表包含 dialog:not([open]) { display: none; }，当您在应用的样式表中应用其他显示值时，它会被覆盖。

希望对您有所帮助。

HTML5 对话框元素关闭按钮无法正常工作

HTML5 dialog element close button not working properly

javascript

modal-dialog

button