我正在學習 Javascript，并研究了這些類似的案例1、2、3、4、5、6、7、8，但沒有成功。我不使用像 jQuery 或 Bootstrap 這樣的依賴項。
我想替換alert("Success!"); 使用類似document.getElementById('modal-team').showModal(); 在下面的代碼中，顯示一個模式并使用戶保持在同一頁面中：
window.addEventListener("load", function() {
const form =
document.getElementById('registration');
form.addEventListener("submit", function(e) {
e.preventDefault();
const data = new FormData(form);
const action = e.target.action;
fetch(action, {
method: 'POST',
body: data,
})
.then(() => {
alert("Success!");
})
});
});
你能幫忙嗎？
uj5u.com熱心網友回復：
JavaScript 或 HTML 標準中不存在模態框。為了定義這個概念，您有兩個選擇：
- 你自己創造
- 您從以特定方式定義它的庫中加載一個特定的實作。
上面列出的問題是使用 Bootstrap 的模態實作，因此只有在您使用 Bootstrap 時才適用。
如果沒有庫，模態并不是特別難以實作，但您必須考慮解決幾個問題：
- 它如何在所有設備上顯示，包括移動設備
- 當其內容超過螢屏大小時它如何滾動（如果您在
<body>級別或.modal-body級別實作滾動） - 您如何處理多個模態實體（當您從另一個模態打開一個模態時，是保持它們都打開還是關閉初始模態）
- 如果（以及如何）允許將資料注入到模態實體中，并且如果（以及如何）允許從模態實體回傳資料，當模態關閉時（通常通過指定一個回呼來解決，該回呼由模態呼叫，在它之前關閉）。
在大多數模態實作中，上述所有問題都已經解決，這就是為什么人們更喜歡使用它們，而不是自己撰寫。
要回答您的具體問題， anHTMLDivElement沒有.showModal()方法。在呼叫這樣的方法之前，您首先需要定義它。
uj5u.com熱心網友回復：
我使用不同的路徑解決了這個問題，但使用了更多我不喜歡的代碼。
使用相同的 js 進行攔截（剛剛洗掉.then）：
window.addEventListener("load", function() {
const t = document.getElementById("infobar");
t.addEventListener("submit", function(e) {
e.preventDefault();
const n = new FormData(t),
o = e.target.action;
fetch(o, {
method: "POST",
body: data, }) }) });
為具有唯一 id 的表單呼叫 onsubmit 函式：
<form onsubmit="Dia()" id="infobar" name="form"
method="post" action="blablabla">
<input type="email" name="Email" placeholder="Email here">
<input type="submit" value="Join"></form>
服務于表單的 js 函式：
function Dia(){document.getElementById("Di").showModal()};
js 函式顯示的模式（使用對話框，因為它受現代瀏覽器支持1）：
<dialog id="Di">???? Received.</dialog>
如果有人可以提供更少代碼（和多個 id）的解決方案，對于沒有依賴關系的相同結果，請成為我的客人；我很想學習。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/446755.html
標籤：javascript 邮政 模态对话 拿来 警报