Question

这个问题可能被标记为重复，但我的问题没有通过相关SO线程中提到的事情解决，这里是link到那个

我必须在其中创建一个带有Image的模态并将其堆叠到现有的AngularJS应用程序中。所以，到目前为止我所做的就是这个。当我做data-backdrop =“false”时，整个黑色色调被删除，这很明显。但我不希望这样。我希望黑色色调留在那里，但在模态后面没有堆叠在它上面。

如何在不使用jQuery的情况下实现这一目标。

这是我的代码：

<li ui-sref-active="active">
            <a href="javascript:;" data-toggle="modal" data-target="#myModal">
              <i class="fa fa-bullhorn" style="color: #fff200"></i>
             <span id="glow" style="color: #fff200">What's New</span>
            </a>
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h3 class="modal-title" style="color: #000"><strong>New Features</strong></h3>
                    </div>
                    <div class="modal-body">
                      <center>
                        <img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive">
                      </center>
                    </div>
                    </div>
                    <!-- <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div> -->
                  </div>
                </div>
            </div>
          </li>

Answer 1

在使用带引导程序的angularjs时，我曾经遇到过和你一样的问题。更改对话框的 z-index 和后退功能为我解决了问题。希望这会对你有所帮助。

.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 9999;
    background-color:transparent!important;
}

Answer 2

嘿，我知道这个问题有点老了，但是我发现有一些修改对我有用。

我正在使用cli> 6.0.0。我还使用了ng-bootstrap版本2.0.0

直接在src下进入styles.css，使用

 .modal-backdrop{
    z-index: 20;
 }

我发现.modal的z索引为40，所以我只是将背景修改为20 z索引。

Bootstrap模态出现在AngulaJS应用程序的背景下

2 个答案: