Question

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

我的功能

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....


  });   
}

Answer 1

Bootstrap模型对象提供了手动显示方法。我们假设它具有id myModal。假设您已正确设置并且已经准备就绪，那么这就是您在数据准备就绪后显示它的方式：

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 docs。

加载内容后显示bootstrap模式

1 个答案: