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

问题描述

实体化模式应该像

$ p
$ b

查看我的问题（我遇到同样的问题）：

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

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?

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

解决方案

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

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)

这篇关于实现模态覆盖整个页面（模态弹出窗口未被带到前台）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！