Question

我是webDevelopment的新手。在这里，我使用的是bootstrap模态。当我第一次打开它正确打开时，但当我尝试第二次打开时，整个屏幕变为空白而无法执行任何操作。

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

任何人都能帮助我吗？提前致谢。

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

Bootstrap模式未出现屏幕空白

1 个答案: