引导模式没有出现屏幕空白答案

【问题标题】：Bootstrap modal is not appearing screen blank引导模式没有出现屏幕空白
【发布时间】：2018-02-16 07:09:03
【问题描述】：

我是webDevelopment 的新手。在这里，我使用的是引导模式。在我第一次打开它时它可以正常打开，但是当我第二次尝试打开它时，整个屏幕变黑并且无法执行任何操作。

HTML

<div id="documentModal" class="modal fade" role="dialog" aria-labelledby="confirmModal" aria-hidden="true" data-backdrop="static"
            data-keyboard="false">
        <div class="modal-dialog modal-sm  documentModal">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Documents which are not Processed</h4>
                </div>
                <div class="modal-body">
                    <ul class="list-group gazetteer-conatiner">
                         <li class="list-group-item" ng-repeat="file in files_Failed"
                            ng-show="file">
                            <span>{{file}}</span>
                        </li>           
                     </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-size btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

CSS -

#documentModal{
  .modal-body{
    min-height: 450px;
    margin-bottom: -27px;
  }
  .modal-footer {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 400;
    background: #f1f1f1;
    border-top: 1px solid #e0e0e0;
    border-radius: 6px;
  }
  .modal-dialog{
    width: 700px;
  }
  .modal-close, .modal-close:hover{
    color: #000000;
    font-weight: bolder;
    font-size: 24px;
  }
  .modal-header{
    height: 60px;
  }
}

角度

var _erromessage = angular.element(document.querySelector('#documentModal'));
if(($rootScope.progressValuePercentage === 0) && (docType !== "jobDescription") && ($scope.files_Failed.length > 0)) {
                      console.log("Calling modal");
                      _erromessage.modal('show');
                }

谁能帮我解决这个问题？提前致谢。

【问题讨论】：

为什么不使用 ui.bootstrap 或 angular-bootstrap？
你能告诉我我的代码有什么问题吗？
你能提供一个 Jsfiddle 链接或其他一些链接来演示这个吗？
请检查我已添加图片
模态html是否与其他html代码分开？它有可能从父母那里获得风格。确保它在所有其他容器之外。

标签： javascript jquery css angularjs html

【解决方案1】：

我遇到了同样的问题，为了让它工作，我不得不稍微改变一下 css

.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-backdrop.in {
  opacity: 0.5;
}

【讨论】：