【问题标题】:Bootstrap modal shadow displays on modalBootstrap 模态阴影显示在模态上
【发布时间】:2019-03-07 20:05:04
【问题描述】:

我的网页上有一个引导模式,但每次打开模式时,它都会在其阴影下方打开,我该如何解决这个问题?

<div id="logoutModal" bsModal #myModal="bs-modal" class="modal" 
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria- 
hidden="true" >
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Sign Out</h4>
                <button type="button" class="close" data-dismiss="modal" 
aria-hidden="true" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
                <p><i class="fa fa-question-circle"></i> Are you sure you 
want to sign out? <br /></p>
            </div>
            <div class="modal-footer text-center">
                    <button class="btn btn-default btn-primary" data- 
dismiss="modal" (click)="confirmSignOut()">Sign out</button>
                    <button class="btn btn-default" data- 
dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】:

    标签: html css twitter-bootstrap bootstrap-modal


    【解决方案1】:

    我现在有解决方案。 1.在我的自定义css文件中

    .modal-backdrop {
      //hides the default modal shadow
      display: none;
    }
    
    .modal {
      //modal custom bachground/shadow
      background: rgba(0,0,0,0.5);
    }
    
    or
    
    .modal{
      background-color: rgba(0, 0, 0, 0.3);
    }
    .modal-backdrop{
      position: relative;
    }
    

    2。我写我的模态html标签如下。

     <div id="logoutModal" bsModal #myModal="bs-modal" class="modal" 
        tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria- 
        hidden="true" data-backdrop="false" style="background: 
        rgba(0,0,0,0.5);">
        ....
    </div>
    

    这解决了我的问题。

    【讨论】:

      【解决方案2】:

      当模态不是&lt;body&gt; 的直接子级时,可能会发生这种情况。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-03-07
        • 2017-07-18
        • 2015-10-31
        • 1970-01-01
        • 2021-08-04
        • 2020-06-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多