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

Question

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

Materialize模态应该像这里一样,但不幸的是,我网上发生的事情是整个页面包括模态是"黑暗背景"的一部分.模态应该叠加在背景的顶部(变暗),模态应该是一个活动页面.我的模态的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之外将解决您的问题.

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

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

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