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-body div：

$(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 并向用户提供反馈，否则单击Add 信号似乎没有任何作用。

这里的例子：http: //jsfiddle.net/mccannf/HK26K/2/

于 2013-02-13T22:39:36.017 回答
0

Bootstrap 文档有一个示例，该示例使用show.bs.modal事件作为触发器将ajax 加载到模式对话框中，而不是打开器上的 click 事件。我在我的解决方案中修改了该模式：

$('#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 回答