当显示模态 window 时，阻止其他页面元素的功能

Question

我是 JavaScript 的新手。当我没有正确填写所需的表单字段时，我会弹出一个模态 window（这部分是在 Rails 上用 Ruby 编程的）。所以，window 出现了，但是当它出现时，这个灰色背景并没有覆盖页面内容，就像我这里的其他模态一样：

相反，所有页面元素都保持活动状态，如果我单击我的按钮，错误内容将会加起来。

此外，如果我单击另一个按钮导致显示第二个模态，它将出现在错误模态的正上方。这是一团糟。如果我将 bootstrap class 添加到 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>

在确认模式的情况下，我使用了 gem，而我需要的功能恰好来自 bootstrap 模式。但是我的错误模态以某种方式没有这种灰色覆盖功能。如何在显示模态时禁用页面内容（尤其是按钮）？谢谢！

Answer 1

请检查 Bootstrap 文档的第二个示例：https://getbootstrap.com/docs/4.4/components/modal/

看来您的按钮的数据属性必须更改为：

... data-toggle="modal" data-target="#myModal">按钮

这是正确打开带有淡入淡出 class 的模式所必需的。

当显示模态 window 时，阻止其他页面元素的功能

Prevent functionality of other page elements, when modal window is shown

javascript

overlay

modal-dialog