Question

我在我的应用程序中使用了bootstap模式弹出窗口。这是我遇到的问题，但无法找到解决方案。

假设我有一个如下所示的点击事件监听器：

jQuery("#show-invoice").click(function(){
       jQuery('#invoice-details').modal('show');

       ...a call to an api to retrieve invoice details...
       ...it takes about 2-3 seconds to retrieve...
});

问题是，当我点击Chrome中的＃show-invoice 链接时，模态会等待api调用完成，从而在显示模式窗口之前产生2-3秒的延迟。在Firefox中，模态窗口立即显示，这是有道理的，因为 jQuery（'＃invoice-details'）。modal（'show'）; 在其他任何事情之前运行。

所以我的问题是，如何在偶数发生后立即显示模态窗口，而不是等待 jQuery（'＃invoice-details'）之后的任何内容.modal（'show'）; < / em>在所有浏览器中？

Answer 1

您可以立即显示模态

jQuery('#invoice-details').modal('show');

在此之后你可以做异步ajax调用。在加载数据时，您应该在模式中显示加载图标而不是发票详细信息。加载数据后，您可以用新加载的数据替换图标。像这样：

 jQuery.ajax({
    url: 'invoice_details_url',
    type: 'get',
    success: function ( invoice_details_data ) {
       jQuery('#invoice-details .invoice-details-container').
              empty().append(invoice_details_data);
    },
    async:true,
 });

立即显示boostrap模式，无需等待内容加载

1 个答案: