javascript - Bootstrap 模式没有出现屏幕空白

Question

我是 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;
  }
}

Angular

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');
                }

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

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