Materialize模态框覆盖整个页面（模态弹出未置于前景）。

Question

我因保密原因无法上传Web UI截图。

Materialize模态框应该像这里一样运行，但不幸的是，我的Web页面包括模态框在内都是“黑色背景”的一部分。模态框应该覆盖在背景上（即变暗的背景），并且模态框应该是一个活动页面。我的模态框的z-index值为1003（默认值）。

在UI方面，我点击任何东西都会关闭模态框，即使是模态框中的按钮（实际上，我甚至无法点击按钮，因为它们都是黑色背景的一部分）。有什么想法吗？

以下是参考代码：

        <button  data-target="modal1" class="btn waves-effect waves-light modal-trigger" type="submit">Save
            <i class="material-icons right">send</i>
            <!-- Modal Structure -->

        </button>
        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
            </div>
            <div class="modal-footer">
                <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" name="action">Submit</a>
                {{ form.submit }}
            </div>
        </div>

我希望您的模态框可以用于表单提交确认，但这里忽略了细节。

- return 0

---

没有演示可以复制问题，很难提供帮助。当您打开并在浏览器中检查元素时，是否有任何具有更高z-index的内容覆盖它？ - charlietfl

如何检查是否存在具有更高 z-index 的项目？ - return 0

检查浏览器开发工具中的元素并查看CSS。 - charlietfl

我不能检查所有元素的 z-index，所以我将我的模态框的 z-index 设置为 99999，仍然很暗... - return 0

当然可以检查 z-index。 - charlietfl

同样的问题，我不知道该怎么解决？ - Nikhil Verma

Answer 1

问题在于您的模型结构位于某个div内部。将模型结构放置在主div之外即可解决问题。

请查看层次结构图片。

参见我的问题（我遇到了同样的问题）： Materialize模态框在背景后面（模态框未置于前景）。

- Nikhil Verma

Answer 2

您可以在文档准备就绪时将您的模态框移动到主元素上：

$(document).ready(function () {
    $(".modal").detach().appendTo('#main-div');
    $('.modal').modal();
});

希望它有所帮助 :)

- Ypenia

Answer 3

这是因为在modal.js中，他们将body的overflow设置为hidden。

要解决这个问题：

打开modal.js文件

你会发现"body.style.overflow = 'hidden';"，只需将其注释掉或将overflow：hidden更改为scroll。并从DOM中删除"modal-overlay"或"lean-overlay"。

- BASAVANA GOUDA S PATIL

Answer 4

你没有正确关闭模态框。每当有异步方法时，它都会失去模态框的上下文并无法关闭它。因此，在异步调用完成后，从组件中关闭模态框。

this.yourModal.actions.emit({ action: "modal", params: ['close'] });

- shyam padia