javascript - Bootstrap 3 Modal: `data-remote` loading image - Stack Overflow

admin管理员组

文章数量:1405103

My website uses data-remote on a bootstrap modal to load images. You can see the code in this question () which I answered myself. The thing is that it might take a second or two to load the info so I would like to add a loading image (preferably the one used in fancybox). Im not 100% sure how to do this. It might be to add the image and when modal-open loads then remove the image. Im not 100% sure on how to do this and any help will be great! Thanks!

My website uses data-remote on a bootstrap modal to load images. You can see the code in this question (https://stackoverflow./a/21199283/2537559) which I answered myself. The thing is that it might take a second or two to load the info so I would like to add a loading image (preferably the one used in fancybox). Im not 100% sure how to do this. It might be to add the image and when modal-open loads then remove the image. Im not 100% sure on how to do this and any help will be great! Thanks!

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 12:14 CommunityBot 111 silver badge asked Jan 18, 2014 at 2:36 nahtnamnahtnam 2,68911 gold badge2020 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

According to the docs, you can use the event listeners:

show.bs.modal and shown.bs.modal

$(function()
{
    $(".modal").on("show.bs.modal",function()
    {
        // add loader indicator
    });
    $(".modal").on("shown.bs.modal",function()
    {
        // remove loader indicator
    });
}

Your own answer to your other question does not have any javascript. So it's difficult to provide an answer that can be integrated into your current solution.

A loaded.bs.modal event will be present in Bootstrap v3.1.0 (see https://github./twbs/bootstrap/issues/10911); listening for this event is preferable to listening to shown.bs.modal.

本文标签： javascriptBootstrap 3 Modal dataremote loading imageStack Overflow