Materialize modal overlay the whole page (the modal popup was not brought to foreground)

问题

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

回答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.

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.

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.

回答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 :)

来源：https://stackoverflow.com/questions/34832811/materialize-modal-overlay-the-whole-page-the-modal-popup-was-not-brought-to-for

标签

jquery

html

user-interface

materialize