更快地进行引导模式加载

Have Bootstrap Modal Load Faster

本文关键字：模式 加载      更新时间：2023-09-26

我有一个引导模式：

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

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

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

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

通过将其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;
}
相关文章：