Php Yii2在引导模式仍在加载时加载页面/图像

我有这样的想法：

<?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。我不确定。如何实现这一点？

因为模式窗口的加载主要取决于ajax请求，所以您可以在它前面显示指示器，并隐藏在回调中，类似这样：

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

我想出来了：

$('#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();
});

---

谢谢但是代码对我不起作用。我将您的代码放在$modalButton.ClickFunctionEvent中。错误在哪里？或者指示灯保持不活动？检查元件时没有错误。当我点击按钮时，我看不到图像。检查是否执行了ajax请求，指示器的选择器是否有效。这些javascript问题如何与Yii相关？什么都没有。只是个疯狂的想法。试试这个