在背景之后实现模态（模态弹出不会被带到前台） [英] Materialize modal behind the background (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-mobileclass =right hide-on-med-and-down> 
 <！ -  TRIGGER  - > 
< li>< a class =wave-effect modal-triggerhref =＃modal1>< i 
 class =material-icons> account_circle< / i> < / A> 
< / li> 
 <！ - 模态结构 - > 
< div id =modal1class =modal> 
< div class =modal-content> 
< h4>模态标头< / h4> 
 
< p>一堆文字< / p> 
< / div> 
< div class =modal-footer> 
< a href =＃！ class =modal-action modal-close waves-effect waves-green btn-flat>同意< / a> 
< / div> 
< / div> 
< li style =margin-right：20px; margin-left：10px;> {{userName}}< / li> 
 
< / ul> 
< ul id =slide-outclass =side-nav> 
< li class =wave-effect wifull>< a href =＃/ register>注册< / a> 
< / li> 
< li class =wave-effedct wifull>< a href =＃/ login>登入< / a>< / li> 
< li class =no-padding> 
< ul class =collapsible collapsible-accordion> 
< li> 
< a class =collapsible-header>近期文章< i 
 class =材料图标右侧> expand_more< / i>< / a> 
 
< div class =collapsible-body> 
< ul> 
< li class =waves -wifull wifull>< a style =color：slategreyhref =＃/ mainPost> 
支持库v22.1.0 
< / a>< / li> 
< li class =waves -wifull wifull>< a style =color：slategreyhref =>第二个< / a> 
< / li> 
 
< / li> 
< li class =waves -wifull wifull>< a style =color：slategreyhref =>第四个< / a> 
< / li> 
< / ul> 
< / div> 
< / li> 
< / ul> 
< / li> 
< li>< a href =＃/ dsdsd> sdjsd< / a>< / li> 
< / ul> 
< a href =＃data -activates =滑出class =按钮折叠展示大型展示中&下>< i 
 class =材料图标>菜单< / 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 {
颜色：灰色; 
 font-size：1.2rem; 
 font-family：Karla，serif！important; 
} 
 
 .wifull {
 width：100％; 
 
 
 code，span {
 font-family：Karla，Raleway，Roboto Condensed，Roboto，sans-serif; 
填充：.25em .5em; 
 font-size：100％; 
颜色：＃bf616a; 
 border-radius：3px; 
 
 $ b h1，h2，h3，h4，h5，h6 {
 font-family：Raleway，Karla，Roboto Condensed，Roboto，衬线; 
 line-height：1.25; 
 letter-spacing：-.01em！important; 
颜色：＃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图标* / 
 @ 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'）格式（'woff'），
 url（'../ fonts / imdb.ttf？pxgy1n'）格式（'truetype'），
 url（'../ fonts / imdb.svg？pxgy1n #imdb'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 
 [class ^ =icon-]，[class * =icon-] {
 font-family：'imdb'; 
说：无; 
 font-style：normal; 
 font-weight：normal; 
 font-variant：normal; 
 text-transform：none; 
 line-height：1; 
 
 / *更好的字体渲染=========== * / 
 -webkit-font-smoothing：antialiased; 
 -moz-osx-font-smoothing：grayscale; 
} 
 
 .icon-imdb {
 display：block; 
} 
 
 .icon-imdb：之前{
内容：\e600; 
} 
 
 body {
 font-size：18px; 
} 
 
 / *在CSS中调整图标的颜色和大小！ * / 
 .imdb-link {
 color：＃e22; 
 font-size：200％; 
转换：全1; 
} 
 
 .imdb-link：hover {
 color：orange; 
} 
 
＃登录页面.btn {
背景颜色：＃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仅限屏幕和（最小宽度：992px）{
 #cardTop {
最小高度：520px; 
 
 
 $ b @media仅屏幕和（最小设备宽度：601px）和（最大设备宽度：991px）{
 #cardTop { 
 min-height：520px; 
 
 
 
 @media唯一屏幕和（最大设备宽度：600px）{
 #cardTop {
 min-height：520px; 
} 
} 
  

解决方案

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

请查看层级图。

My question is the same as :

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

My modal is appearing behind its background.

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(just in case some code clashes with other):

     .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;
        }
    }

解决方案

The problem was that I had Model Structure inside my nav div. By placing my Model Structure outside that div solved my problem.

See the pic for the hierarchy.

这篇关于在背景之后实现模态（模态弹出不会被带到前台）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！