javascript - 在后台实现模态(模态弹出窗口未带到前台)

Question

我的问题是一样的:

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

我的模态出现在其背景后面。

HTML:

    <div class="navbar-fixed">
        <nav style="height: 65px">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo center">
                    IMDB</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                  <!--TRIGGER-->                     
                 <li><a class="waves-effect modal-trigger" href="#modal1"><i
                            class="material-icons">account_circle</i></a>
                    </li>
                  <!-- Modal Structure -->
                    <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">Agree</a>
                        </div>
                    </div>
                    <li style="margin-right: 20px;margin-left: 10px;">{{userName}}</li>

                </ul>
                <ul id="slide-out" class="side-nav">
                    <li class="waves-effect wifull"><a href="#/register">Register</a>
                    </li>
                    <li class="waves-effedct wifull"><a href="#/login">Login</a></li>
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li>
                                <a class="collapsible-header">Recent Posts<i
                                        class="material-icons right">expand_more</i></a>

                                <div class="collapsible-body">
                                    <ul>
                                        <li class="waves-effect wifull"><a style="color: slategrey" href="#/mainPost">
                                            Support Libraries v22.1.0
                                        </a></li>
                                        <li class="waves-effect wifull"><a style="color: slategrey" href="">Second</a>
                                        </li>
                                        <li class="waves-effect wifull"><a style="color:slategrey" href="">Third</a>
                                        </li>
                                        <li class="waves-effect wifull"><a style="color: slategrey" href="">Fourth</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#/dsdsd">sdjsd</a></li>
                </ul>
                <a href="#" data-activates="slide-out" class="button-collapse show-on-large show-on-medium-and-down"><i
                        class="material-icons">menu</i></a>
            </div>
        </nav>
    </div>

CSS(以防某些代码与其他代码冲突):

     .navbar-fixed {
        background-color: #00BFA5;
    }

    #poster {
        display: block;
        border-radius: 12px;
        margin-top: 20px;
        margin-bottom: 15px;;
    }

    div {
        display: block;
    }

    div, h1, h2, h3, h4, h5, h6 {
        font-family: Raleway, serif !important;
    }

    p {
        color: grey;
        font-size: 1.2rem;
        font-family: "Karla", serif !important;
    }

    .wifull {
        width: 100%;
    }

    code, span {
        font-family: "Karla", "Raleway", "Roboto Condensed", Roboto, sans-serif;
        padding: .25em .5em;
        font-size: 100%;
        color: #bf616a;
        border-radius: 3px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: "Raleway", "Karla", "Roboto Condensed", Roboto, sans-serif;
        line-height: 1.25;
        letter-spacing: -.01em !important;
        color: #313131;
        text-rendering: optimizeLegibility;
        font-weight: 700;
    }

    .title {
        color: #424242;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }

    h3, h5 {
        margin-bottom: -0.5rem;
    }

    a:hover,
    a:focus {
        color: #006699;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }

    /*IMDB Icon*/
    @font-face {
        font-family: 'imdb';
        src: url('../fonts/imdb.eot?pxgy1n');
        src: url('../fonts/imdb.eot?#iefixpxgy1n') format('embedded-opentype'),
        url('../fonts/imdb.woff?pxgy1n') format('woff'),
        url('../fonts/imdb.ttf?pxgy1n') format('truetype'),
        url('../fonts/imdb.svg?pxgy1n#imdb') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'imdb';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-imdb {
        display: block;
    }

    .icon-imdb:before {
        content: "\e600";
    }

    body {
        font-size: 18px;
    }

    /* adjust the color and size of the icon right in the CSS! */
    .imdb-link {
        color: #e22;
        font-size: 200%;
        transition: all 1s;
    }

    .imdb-link:hover {
        color: orange;
    }

    #login-page .btn {
        background-color: #00BFA5;
    }

    #login-page h3 {
        margin: 0 !important;
        padding-top: 17px;
    }

    #login-page {
        margin: 100px 0 0 0;
    }

    #login-page .margin {
        margin: 1px !important;
    }

    .card .card-title {
        font-family: "Karla", "Raleway", "Roboto Condensed", Roboto, sans-serif;
        font-size: 22px !important;
        font-weight: 400;
    }

    .card-title ~ p {
        color: #bf616a !important;
        font-family: "Raleway", "Roboto Condensed", Roboto, sans-serif;
        font-size: 20px !important;
        font-weight: 400;
    }

    .card-content {
        padding: 8px !important;;
    }


    @media only screen and (min-width: 992px) {
        #cardTop {
            min-height: 520px;
        }
    }

    @media only screen and (min-device-width: 601px) and (max-device-width: 991px) {
        #cardTop {
            min-height: 520px;
        }
    }

    @media only screen and (max-device-width: 600px) {
        #cardTop {
            min-height: 520px;
        }
    }

Answer 1

问题是我的导航 div 中有模型结构。通过将我的模型结构放在该 div 之外解决了我的问题。

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