javascript - Bootstrap 模式出现在 AngularJS 应用程序的后台

Question

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

我必须制作一个带有图像的模态并将其堆叠到现有的 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 和 bootstrap 时遇到过和你一样的问题。更改对话框和背景的 z-index 解决了我的问题。希望这对您有帮助。

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

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