Question

我使用简单的vanilla twitter bootstrap模式，如：

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

在一小段jQuery中使用data-id来制作ajax请求，渲染出一些html，然后将其注入模态体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调用完成之前，如何延迟模态（页眉+页脚）完全显示？

Answer 1

从data-toggle="modal"标记中删除<a>。但是请注意，您还应该在$ .get上捕获.error并向用户提供反馈，否则会出现点击添加信号无效的情况。

此处示例：http://jsfiddle.net/mccannf/HK26K/2/

Answer 2

Bootstrap文档有一个示例，它使用show.bs.modal事件作为load ajax into a modal dialog的触发器，而不是开启器上的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();
        }
    });

如何延迟显示模式的标题，直到在Twitter引导程序中返回ajax调用？

2 个答案: