0

私は次のようなプレーンなバニラTwitterブートストラップモーダルを使用しています：

<a data-toggle="modal" data-id="983E46EC-9DFE-4E5F-80E3-524C982FCC67" title="" class="open-signal btn btn-primary" href="#addSignal">Add signal</a>

data-idはjQueryの小さな部分で使用され、ajaxリクエストを作成し、HTMLをレンダリングして、それをmodal-bodydivに挿入します。

$(document).on('click', '.open-signal', function () {
    var id = $(this).data('id');
    $.get('@Url.Action("CreateSignal")', { "id": id })
        .done(function (d) {
            $('.modal-body', '#addSignal').html(d);
            $('#addSignal').modal('show');                    
        });
    });

ただし、モーダルのヘッダーとフッターは、ajax呼び出し中にすでに表示されており、数秒以上かかる場合があります。すでに表示されており、ajax呼び出しが実行された場合にのみ、取得したhtmlが挿入されます。

ajax呼び出しが終了するまで、モーダル（ヘッダー+フッター）が完全に表示されるのを遅らせるにはどうすればよいですか？

4

2 に答える 2

1

タグdata-toggle="modal"からを削除します。<a>ただし、.error$。getをキャッチしてユーザーにフィードバックを提供する必要があることに注意してください。そうしないと、[シグナルの追加]をクリックしても何も起こらないように見えます。

ここでの例：http：//jsfiddle.net/mccannf/HK26K/2/

于 2013-02-13T22:39:36.017 に答える
0

ブートストラップのドキュメントには、オープナーのクリック イベントではなく、モーダル ダイアログに ajaxshow.bs.modalをロードするトリガーとしてイベントを使用する例があります。私は自分のソリューションでそのパターンを変更しました：

$('#mainModal')
    .on('show.bs.modal', function (e) {
        var $source = $(e.relatedTarget);
        var $modal = $(this);
        var title = $source.data('modalTitle'); //data-modal-title="@item.Name"
        var url = $source.attr("href"); //assumes source is a hyperlink

        if (title && url) {
            $modal.find('.modal-title').text(title);
            $modal.find(".modal-body").load(url, function () {
                //the call to modal('show') triggers the event again, 
                //but the $source won't have a title or an href
                $modal.modal('show'); 
                $modal.find('.modal-body input').first().focus();
            });

            //don't show the dialog immediately
            return e.preventDefault();
        }
    });
于 2016-03-24T12:49:34.110 に答える