有 Bootstrap 模态加载更快

Question

我有一个 bootstrap 模态：

<div class="modal" id="myModal"> ... </div>

我有 javascript 显示模式的代码，然后调用一些表单验证代码：

$("#myModal").modal("show");
doValidation();

模式的目的是防止用户在验证表单时做任何事情。不幸的是，在验证完成之前，模态框不会出现。我已经尝试将验证代码移动到一个在模态打开时触发的事件，但即便如此，模态加载速度仍然不够快。此外，如果没有表单验证代码，模式仍然会在明显延迟后显示，而不是像我想要的那样立即显示。我怎样才能使模式立即显示？

Answer 1

您可以通过将其display 属性设置为block（默认为none）来立即加载模态。

在您的 css 中输入以下内容：

.manually-show-modal {
    display:block !important;
}

然后，将此 class 动态附加到模态。这可以用 angular 完成，如下所示：

<div class="modal" ng-class="{'manually-show-modal': show_modal}" id="myModal">

作用域初始化：

$scope.show_modal = false;

模态显示：

$scope.show_modal = true;
doValidation();

此方法的一个警告是您将无法通过正常方式关闭模态。如果您希望用户能够关闭模态，则需要制作一个模态关闭按钮，如下所示：

<button ng-click="modalClose()">Close</button>

在您的 angular 控制器中使用以下内容：

$scope.modalClose = function() {
    $scope.show_modal = false;
}

Have Bootstrap Modal Load Faster