当 Bootstrap 模式仍在加载时 Yii2 正在加载 Page/Image

Question

我有这个模式：

<?php
    echo Html::button(
        'Create New Staff',
        [
            'value' => Url::to(['create-new-staff']),
            'class' => 'btn btn-success btn-create',
            'id' => 'modalButton'
        ]);

    Modal::begin(['id' => 'modal']);
    echo "<div id='modalContent'></div>";     
    Modal::end();
?>

这是我的示例加载指示器图像：

<img src="http://dkclasses.com/images/loading.gif" id="loading-indicator" style="display:none" />

当我单击模态按钮时，我想在模态仍在加载时显示加载屏幕或图像，而不是只是简单地等待模态加载。我试过这个：

<script type="text/javascript">
    $("modalButton").click(function(event) {
        $.post( "/echo/json/", { delay: 2 } );
        $(document).bind("ajaxSend", function(){
            $("#loading-indicator").show();
            }).bind("ajaxComplete", function(){
            $("#loading-indicator").hide();
            $("#modalContent").show();
         });
    });
</script>

我基于此 fiddle 中的脚本。

我也尝试了我在互联网上搜索到的那些。 None 其中有效果。我认为这是因为我正在使用 Yii。我不确定。我该如何实现？

Answer 1

因为模态 window 的加载主要取决于 ajax 请求，您可以在它之前显示指示器并隐藏在回调中，像这样：

...
$("#loading-indicator").show();
$.post(
    "/echo/json/",
    { delay: 2 },
    function(data) {
        ...
        $("#loading-indicator").hide();
    }
);
...

Answer 2

想通了：

$('#modalButton').click(function (){
    $('#modal').find('#modalContent').html("")
        .load($(this).attr('value'), function(){
            var thisModal = $('#modal');
            setTimeout(function(){
                thisModal.modal('show');
                $("#loading-indicator").hide();
            }, 1000);
        });
    $("#loading-indicator").show();
});

当 Bootstrap 模式仍在加载时 Yii2 正在加载 Page/Image

Yii2 Loading Page/Image when Bootstrap Modal is still Loading

php

jquery

yii

twitter-bootstrap

yii2