CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3
styke
styke

Reputation: 2174

Can I delay the showing of a modal dialog in Bootstrap 3?

We have some custom code which hooks into native Bootstrap modal functionality and allows for the fetching of content via AJAX and displaying it in the called modal. Here is the code that displays the modal on the AJAX success callback: 

//Insert content into modal HTML 
$modalContent.html(json.data);

//A bit of custom code here... 

//Display modal
$modal.modal();

I would like to improve this action by reducing the perceived lag when clicking on a remote modal link by opening the modal backdrop with a small loading message straight away, and then in the AJAX success callback I'l open the actual modal window. Is there any way to achieve this (specifically is there any way to programatically show a modals' backdrop first and then defer the showing of the modal window to a later time?).

Upvotes: 0

Views: 442

Answers (1)

Enermis
Enermis

Reputation: 697

You can do something like so

function getModal(){
    $.ajax(...).success(function(){
        $modalContent.html(json.data);
        $modal.modal();
    });
}

function showSpinner(){
    //show div with spinner
}

function showModalOnClick(){
    openEmptyModal();
    showSpinner();
    getModal();
}

$(...).onclick(showModalOnClick);

Upvotes: 4

Related Questions