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

然后，动态地将此类附加到模态。这可以通过如下角度完成：

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

在角度控制器中使用以下内容：

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