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请求，所以你可以在它之前显示指标并隐藏在回调中，如下所示：

**AttributeError at /ma_page/
'NoneType' object has no attribute 'year'**

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

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

2 个答案: