在等待數據加載時，模態內的微調框

Question

我有一個物品清單，每個物品都附有徽章。 當您單擊徽章時，它將從局部視圖中加載表格。

這是我的徽章循環：

  @foreach (var item in Model)
  {
        <li>
            <a href="#my_modal" data-toggle="modal" data-book-id="@Url.Action("AssociatedToHideout", "Hideout", new { id = item.HideoutID })">
                <span class="badge-rounded bg-red">@Html.Action("TaskCount", "Hideout", new { id = @item.HideoutID })</span>                  
            </a>
            <div class="item">            
                <a href='@Url.Action("Index", "Hideout", new { id = @item.HideoutID })'>
                    <img src="~/Assets/img/database.png">
                    <span class="caption">@item.Name</span>
                </a>
            </div>

        </li>      
}

data-book-id中的URL操作將告訴我要加載哪個局部視圖。

這是我的模態：

<div class="modal" id="my_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal header</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>  

將其加載到模態中的腳本是這樣的：

<script>
    $('#my_modal').on('show.bs.modal', function(e) {
        var bookId = $(e.relatedTarget).data('book-id');

        $.get(bookId, function (data) {
            $(e.currentTarget).find('.modal-body').html(data);
        });
    });

    $('#my_modal').on('hidden.bs.modal', function(e) {
    $(e.currentTarget).find('.modal-body').text('');
    });
</script>

問題是當我第一次加載頁面時，有時.html(data)不會立即顯示，因此我希望微調器在等待時出現。 我怎樣才能做到這一點？

Answer 1

我們使用waitscreen.js。 使用非常簡單， 可以在github上找到 。 您需要顯示或隱藏的全部是：

//Show options
waitScreen.show();
waitScreen.show("Message");
//Then hide
waitScreen.hide();

並將它們嵌入到適當的位置，該位置將是：

$('#my_modal').on('show.bs.modal', function(e) {
    var bookId = $(e.relatedTarget).data('book-id');
    waitScreen.show();

    $.get(bookId, function (data) {
        $(e.currentTarget).find('.modal-body').html(data);
        waitScreen.hide();
    });
});

您還應該添加一些錯誤處理，因為如果發生任何錯誤，模態將永遠不會消失...

Answer 2

您可以在進行ajax調用之前將loding gif圖像設置為.modal-body div的內容。 當您的ajax調用從服務器獲取響應時，該響應將覆蓋它。

$('#my_modal').on('show.bs.modal', function(e) {
    var bookId = $(e.relatedTarget).data('book-id');
    var imgUrl="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif";
    var $loading = $("<img />").attr("src",imgUrl)

    $(e.currentTarget).find('.modal-body').html($loading);

    $.get(bookId, function (data) {
        $(e.currentTarget).find('.modal-body').html(data);
    });
});

Answer 3

這里的技巧是data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" 通過刪除默認背景並通過使用一些alpha設置對話框本身的背景顏色來創建一個虛擬背景。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

注意：單擊背景不會按預期關閉對話框。 解決方案：為此，您必須添加一些Java腳本代碼。 這是一些示例，您可以如何實現此目的。

$('.modal').click(function(event){
    $(event.target).modal('hide');
});