Materialize模态覆盖整个页面（模态弹出窗口未被带到前台）

Question

由于保密原因，我无法上传网页用户界面的屏幕截图。

Materialise模态应该表现得像here，但不幸的是，我的网站发生的事情是包含模态的整个页面是“黑暗背景”的一部分。模态应该叠加在背景的顶部（变暗），模态应该是一个活动页面。我的模态的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>

（我希望模态是表单提交确认，但这里忽略了详细信息。）

Answer 1

问题是你的模型结构在某个div中。通过将模型结构放在主div之外将解决您的问题。

请参阅图片了解层次结构。

看我的问题（我有同样的问题）：

Materialize modal behind the background (the modal popup was not brought to foreground)

Answer 2

你没有正确关闭模态。每次有异步方法时，它都会丢失模态的上下文，无法关闭它。因此，如果完成异步调用，则从组件中关闭模态。

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

Answer 3

这是因为在modal.js中他们隐藏了身体溢出。

为此：

转到modal.js

你会发现“body.style.overflow ='hidden';”只是评论或溢出：隐藏滚动。并从您的DOM中删除“模态覆盖”或“精益覆盖”。

Answer 4

您可以将文档移动到文档就绪的主元素：

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

希望有所帮助：）