Javascript “模态”；“关闭”-按钮关闭一次后消失_Javascript

Javascript “模态”；“关闭”-按钮关闭一次后消失

javascript

Javascript “模态”；“关闭”-按钮关闭一次后消失,javascript,Javascript,我在rails工作。其思想是，当用户没有填写表单中的所有字段时，会出现模式窗口，指出错误。当我第一次犯这些错误时，窗口显示如我所愿，下面有“关闭”按钮所以，我点击它，模态消失了。一切都好。然后我再次单击“注册”按钮，仍然有空字段，这就是正在发生的事情如您所见，“关闭”按钮未显示。如果我刷新页面并再次单击“注册”，则“关闭”-按钮再次出现。我对JavaScript非常陌生，我不知道发生了什么。这是我的两个文件中的代码。new.js： document.addEventListener("D

我在rails工作。其思想是，当用户没有填写表单中的所有字段时，会出现模式窗口，指出错误。当我第一次犯这些错误时，窗口显示如我所愿，下面有“关闭”按钮

所以，我点击它，模态消失了。一切都好。然后我再次单击“注册”按钮，仍然有空字段，这就是正在发生的事情

如您所见，“关闭”按钮未显示。如果我刷新页面并再次单击“注册”，则“关闭”-按钮再次出现。我对JavaScript非常陌生，我不知道发生了什么。这是我的两个文件中的代码。new.js：

document.addEventListener("DOMContentLoaded", function() {
   var modal = document.getElementById("myModal");
   if (!modal) return;

   var close = modal.querySelector(".dismiss-close");
   var modalBody = modal.querySelector(".modal-body");
   var modalContent = modal.querySelector(".modal-content");

   function closeModal() {
     modal.style.display = "none";
     modalBody.innerHTML = "";
   }

   modalContent.addEventListener("click", function(event) {
       event.stopPropagation();
   });

   close.addEventListener("click", closeModal);
   modal.addEventListener("click", closeModal);
});

和失败的_modal.js.erb：

var errors = <%= error_messages.to_json.html_safe %>;

var errorForm = document.querySelector('#myModal');
var modalBody = errorForm.querySelector('.modal-body');
var alertElement = document.createElement('div');

alertElement.classList.add('alert');
alertElement.classList.add('alert-danger');
modalBody.appendChild(alertElement);
var errList = document.createElement('ul');
alertElement.appendChild(errList)

errors.forEach(function(error) {
   var errElement = document.createElement('li');
   errElement.innerText = error;
   errList.appendChild(errElement)
})

errorForm.style.display = "block";

var错误=；
var errorForm=document.querySelector（'#myModal'）；
var modalBody=errorForm.querySelector（'.modalBody'）；
var alertElement=document.createElement（'div'）；
alertElement.classList.add（'alert'）；
alertElement.classList.add（'alert-danger'）；
modalBody.appendChild（alertElement）；
var errList=document.createElement（'ul'）；
alertElement.appendChild（错误列表）
errors.forEach（函数（错误）{
var errElement=document.createElement（'li'）；
errElement.innerText=错误；
errList.appendChild（errElement）
})
errorForm.style.display=“block”；

那么，我如何通过点击“注册”按钮，点击掉窗口并让它恢复到以前的状态呢？我应该以某种方式使用“切换”方法吗？谢谢

将id添加到警报div

在var alertElement=document.createElement（'div'）之后

alertElement.id=“alertElement”

而不是

modalBody.innerHTML=“”

你可以用

modalBody.removeChild（modalBody.querySelector（“#alertElement”）

它只删除充满错误的div并保留按钮。