当 Bootstrap Modal 仍在加载时 Yii2 加载页面/图像

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 中建立了该脚本。

我还尝试了我在互联网上搜索过的那些。他们都没有工作。我认为这是因为我使用的是 Yii。我不确定。我如何做到这一点？

Answer 1

由于模态窗口的加载主要依赖于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();
});