显示模式而不是控制台警报

Question

我正在学习 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!");
      })
  });
});

您可以帮忙吗？

Answer 1

JavaScript 或 HTML 标准中不存在模态。为了定义这个概念，您有两种选择：

• 您自己创建它；
• 您从以特定方式定义它的库中加载一个特定的实现。

上面列出的问题使用 Bootstrap 的模态实现，因此仅适用于您使用 Bootstrap 的情况。

---

如果没有库，模式的实现并不是特别困难，但是您必须考虑解决一些问题：

• 它如何在所有设备上显示，包括移动设备，
• 当其内容超过屏幕尺寸时它如何滚动（如果您在> 级别或 .modal-body 级别）
• 如何处理多个模态实例（当您从另一个模态打开一个模态时，是否使它们都保持打开状态或关闭初始模态）
• 如果（并且如何）允许将数据注入到模态实例中，以及当模态关闭时是否（以及如何）允许从模态实例返回数据（通常通过指定模态在关闭之前调用的回调来解决）。

上述所有问题在大多数模式实现中都已得到解决，这就是为什么人们更喜欢使用它们，而不是编写自己的实现。

---

要回答您的具体问题，HTMLDivElement 没有 .showModal() 方法。在调用此类方法之前，您首先需要定义它。

Answer 2

我使用不同的路径来解决这个问题，但是使用了更多我不喜欢的代码。

使用相同的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">