This is amazing. ! Thanks. Is there a way to make the greyed-out area fill the entire screen ? Because as it is right now, the user could still press any button or link that is not covered by that area ...

I would try putting the modal at the end of your body tag (or at least outside of the most parent container). Hope that works out!

Nice :D

Exactly what I was looking for - thank you.
Any idea how I'd trigger this from jQuery/JavaScript?

Well, I've got it appearing using:

$( '#modal-processing' ).modal( { show: true } );

but setting {show:false} doesn't make it disappear - any ideas?

Aha!



$( '#modal-processing' ).modal( 'toggle' );



Actually, 'toggle' was acting a bit funky in my code, but then I discovered $( '#modal-processing' ).modal( 'hide' ); - perfect, if a little obvious! (in hind-sight).

Thanks for your implemantation Travis, but I have a dumb question: How the modal will close when my request is complete?

LOL thats a fair question. This can be closed with the Modal JavaScript API provided by Bootstrap:

$('#myModal').modal('hide');

Hope that helps!

Travis your snippets are awesome! What would I do without you

Glad I can help! I'm about to push my float label pattern sample for Bootstrap - be sure to check it out!

Instead using a .GIF, you could've used a font icon and some basic CSS3 to do the rotating cogwheel.

Or use: < i class="fa fa-cog fa-5x fa-spin" > < / i >

Good suggestion, but I wanted to favor the most cross-browser- and cross-platform-solution for a demo like this. For a process this important, ensuring that everyone can see it anywhere is the most important aspect.

If you have the luxury of dealing only with CSS3 browsers, that would be a great way to do it.

So simple but so awesome!

Thanks!