Jquery 物化模式覆盖整个页面（模式弹出窗口未置于前台）

由于保密原因，我无法上传web UI的屏幕截图

Materialize模式的行为应该像，但不幸的是，我的web上发生的事情是，包括模式在内的整个页面都是“黑暗背景”的一部分。模态应该覆盖在背景上（背景变暗），模态应该是一个活动页面。模态的z索引为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>

保存
发送
模态头
一串文字

{{form.submit}

---

（我希望模式是表单提交确认，但这里忽略了细节。）

问题是您的模型结构位于某个div内。将模型结构置于主div外将解决您的问题

有关层次结构，请参见图片

见我的问题（我也有同样的问题）：

---

您没有正确关闭模式。每次有异步方法时，它都会丢失modal的上下文，并且无法关闭它。因此，一旦异步调用完成，就从组件关闭模态

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

---

这是因为在modal.js中，它们将body溢出隐藏起来

为此：

转到modal.js

---

您将发现“body.style.overflow='hidden'；”只需对其进行注释或使overflow:hidden滚动即可。并从DOM中删除“模式覆盖”或“精简覆盖”。

您可以将模式移动到document ready上的主元素：

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

---

希望有帮助：）

如果没有复制问题的演示，很难提供帮助。当打开并检查浏览器中的元素时，是否有比它更高z索引的项目？如何检查是否有具有更高z索引的项目？检查浏览器开发工具中的元素并查看cssI所做的，我无法检查所有元素的z索引，所以我将其设置为99999，用于我的模式，仍然是黑色的…当然，您可以检查z索引。