加载内容后显示引导模态 [英] show bootstrap modal after content is loaded

问题描述

我正在使用Bootstrap 3模式，其中从getJson函数加载一些数据.由于模态内部的数据加载不快，因此我想显示一个加载的图像/文本.加载所有数据后，显示/打开模态.我发现了这个 Thread 这是有用的，但是我不知道如何将其放在我的代码中.有人可以帮我吗?

I'm using a Bootstrap 3 modal in which I load some data from a getJson function. Since the data inside the modal doesn't load equally fast I want to show a loading image/text. When all data is loaded then show/open the modal. I found this Thread which was quit usefull but I don't know how to place that inside my code. Can anybody help me with that?

我的功能

function myfunction(url){
  $('.products-loader').show(); //show the loading image and then??

  $.getJSON(url, function (data){

    var product = data.product;
    var image = 'http://www.webshop.com/i/' + image_id_convert(product.image) + '/380x380x2/image.jpg';

    $('.wqs-title').html('<a href="'+ product.url + '">' + product.title + '</a>');
    $('.wqs-description').html(product.description);
    $('.wqs-images').html('<img src="' + image + '"/>');

    //etc....


  });   
}

推荐答案

Bootstrap模型对象提供了手动显示方法.假设它的ID为 myModal .假设您已正确设置它并且可以将其弹起，那么一旦数据准备就绪，便可以通过以下方式显示它:

The Bootstrap model object provides a manual show method. Let's assume it has the id myModal. Assuming you've set it up correctly and it's ready to be sprung, this is how you would display it once your data was ready:

function myfunction(url) {
  // Show progress bar
  $('.products-loader').show(); 

  // Make AJAX request to load data
  $.getJSON(url, function (data) {

    // On success show modal
    $('#myModal').modal('show');

    // Do other stuff
  });   
}

有关设置模态插件和模态插件提供的其他方法的信息，请参阅 Bootstrap文档.

For information on setting up your modal and other methods provided by the modal plugin, refer to the Bootstrap docs.

这篇关于加载内容后显示引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！