如何使用忙图标显示Bootstrap Modal

时间:2022-06-23 11:17:15

Suppose when user clicks on a button then I would like to show Bootstrap dialog with busy icon just like below one with small size. When server side content comes, requested by jQuery AJAX, then Bootstrap dialog will be automatically resized with bit of animation to fit the content data. Please guide me how to achieve it with Bootstrap Modal and jQuery.

假设当用户点击某个按钮时,我想显示带有忙碌图标的Bootstrap对话框,就像下面一个小尺寸的图标一样。当服务器端内容来自jQuery AJAX请求时,Bootstrap对话框将自动调整大小以适应内容数据。请指导我如何使用Bootstrap Modal和jQuery实现它。

如何使用忙图标显示Bootstrap Modal

I searched Google a lot to have this kind of Bootstrap dialog but found no concept.

我搜索了很多Google以获得这种Bootstrap对话框但没有找到任何概念。

1 个解决方案

#1


4  

Just use the loader icon this way:

只需使用加载器图标:

  1. Inside the .modal-body, add this content:

    在.modal-body内,添加以下内容:

    <img src="loading.gif" />
    
  2. When you click on the link, you fire an AJAX and update the content of the .modal-body.

    单击该链接时,将触发AJAX并更新.modal-body的内容。

If you are using events, you can use:

如果您正在使用事件,则可以使用:

$(document).on("show.bs.modal", function () {
  $(".modal-body").html('<img src="loading.gif" />');
});

You can start with something of that sort and continue working on this.

你可以从那种类型的东西开始,继续努力。

#1


4  

Just use the loader icon this way:

只需使用加载器图标:

  1. Inside the .modal-body, add this content:

    在.modal-body内,添加以下内容:

    <img src="loading.gif" />
    
  2. When you click on the link, you fire an AJAX and update the content of the .modal-body.

    单击该链接时,将触发AJAX并更新.modal-body的内容。

If you are using events, you can use:

如果您正在使用事件,则可以使用:

$(document).on("show.bs.modal", function () {
  $(".modal-body").html('<img src="loading.gif" />');
});

You can start with something of that sort and continue working on this.

你可以从那种类型的东西开始,继续努力。