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

Question

我正在学习 Javascript 并研究了这些类似案例 1, 2, 3, 4, 5, 6, 7, 8 但没有成功。我不使用 jQuery 或 Bootstrap.

这样的依赖项

我想用 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 时才适用。

一个模态在没有库的情况下实现起来并不是特别困难，但是你必须考虑解决几个问题：

它在所有设备（包括移动设备）上的显示方式
当其内容超出屏幕大小时它如何滚动（如果您在 <body> 级别或 .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"> Received.</dialog>

如果有人可以提供一个代码更少的解决方案（并且对于多个 ID），并且没有依赖性的相同结果，请做我的客人；我很想学习。

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

Show modal instead of console alert

javascript

post

alert

modal-dialog

fetch