當Bootstrap模式仍在加載時，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>

我在這個小提琴中使用了該腳本。

我還嘗試了我在互聯網上搜索過的內容。 他們都沒有工作。 我認為這是因為我正在使用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();
});