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

I cannot upload a screenshot of my web UI due to confidential reason.

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

Materialize modal is supposed to behave like here, but unfortunately, what happened to my web is that the whole page including the modal are part of the "dark background". The modal should be overlaid on top of the background (which is darkened) and the modal should be an active page. My z-index for the modal is 1003 (default).

Materialize模态应该像这里一样,但不幸的是,我的网站发生的事情是包含模态的整个页面是“黑暗背景”的一部分。模态应该叠加在背景的顶部(变暗),模态应该是一个活动页面。我的模态的z-index是1003(默认值)。

In terms of UI, whatever I click would close the modal even the buttons within modal (In fact i can't even click on the buttons as they are all part of the dark background). Any idea what might be happening here?

在UI方面,无论我点击什么都会关闭模态甚至是模态中的按钮(实际上我甚至无法点击按钮,因为它们都是深色背景的一部分)。知道这里可能会发生什么吗?

Here is my code for reference:

这是我的代码供参考:

        <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>

(I want the modal to be a form submission confirmation, but the detail is ignored here.)

(我希望模态是表单提交确认,但这里忽略了详细信息。)

4 个解决方案

#1

The problem is that you have your Model Structure inside some div. By placing Model Structure outside the main div will solve your problem.

问题是你的模型结构在一个div里面。通过将模型结构放置在主div之外将解决您的问题。

See the pic for the hierarchy.

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

See my question( I had the same problem):

看到我的问题(我有同样的问题):

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

在背景后面实现模态(模态弹出窗口未被带到前台)

#2

You're not closing the modal properly. Everytime there is an async method it loses the context for modal and cannot close it. So close the modal from the component once the async call if finished.

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

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

#3

It is because in modal.js they are making body overflow hidden.

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

For that:

Goto modal.js

You will find "body.style.overflow = 'hidden';" just comment it or make overflow: hidden to scroll. And remove "modal-overlay" or "lean-overlay" from your DOM.

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

#4

You can move your modal to the main element on document ready:

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

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

Hope it help :)

希望它能帮助:)

#1