Я новичок в JavaScript. И у меня появляется модальное окно, когда мои обязательные поля формы заполнены неправильно (это частично запрограммировано с помощью Ruby на Rails). Итак, окно появляется, но когда это происходит, этот серый фон не накладывается на содержимое страницы, как с моим другим модальным здесь:
Вместо все элементы страницы остаются активными, и если я нажму мои кнопки, содержимое ошибок будет добавлено.
Кроме того, если я нажму другую кнопку, вызывающую второй модальный чтобы показать, это появится чуть выше модальных ошибок. Это беспорядок. Если я добавлю bootstrap класс к моему модальному в html .erb файле, модальный вообще не будет отображаться. Это мои фрагменты кода, отвечающие за этот модал.
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");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modalBody.removeChild(modalBody.querySelector('#alertElement'))
}
}
function closeModal() {
modal.style.display = "none";
modalBody.removeChild(modalBody.querySelector('#alertElement'));
}
modalContent.addEventListener("click", function(event) {
event.stopPropagation();
});
close.addEventListener("click", closeModal);
modal.addEventListener("click", closeModal);
});
Еще один:
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.id = "alertElement";
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";
И мой html .erb файл
<div class="container">
<p class="notification">Please finalise your personal information.</p>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-secondary dismiss-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="center-items-register-second">
<%= form_for(@user, url: wizard_path, remote: true) do |f| %>
<%= render "devise/shared/error_messages" %>
<div class="row second 1">
<div class="column">
<div class="field wizard">
<%= f.label :street, class: 'required'%><br />
<%= f.text_field :street, class: 'form-control' %>
</div>
</div>
<div class="column">
<div class="field housenumber">
<%= f.label :house_number, class: 'required' %><br />
<%= f.text_field :house_number, class: 'form-control' %>
</div>
</div>
</div>
<div class="row second 2">
<div class="column">
<div class="field wizard">
<%= f.label :city, class: 'required' %><br />
<%= f.text_field :city, class: 'form-control' %>
</div>
</div>
<div class="column">
<div class="field wizard zipcode">
<%= f.label :zip_code, class: 'required' %><br />
<%= f.text_field :zip_code, class: 'form-control' %>
</div>
</div>
</div>
<div class="row btns second 3">
<div class="column btns">
<%= f.submit "Register", class: 'btn form margin second'%>
</div>
<% end %>
<div class="column btns">
<%= link_to "Quit", @user, method: :delete, data: { confirm: "Your data won't be saved! Are you sure you want to quit registration process?", title: " " }, class: 'btn form margin second' %>
</div>
</div>
</div>
</div>
</div>
В случае модального подтверждения, я работал с гемом, и нужная мне функция просто пришла с модальным bootstrap. Но у моих модальных ошибок как-то нет этой функции серого наложения. Как отключить содержимое страницы (особенно кнопки), пока отображается модальное? Спасибо!