Bootstrap centered-processing-modal on a DIV/Form - html

Question

Please see this: http://bootsnipp.com/snippets/featured/centered-processing-modal
It is a modal for letting the user know that something is going on in the backend, so please wait. How can I have this only on a form/div and not the whole page in Bootstrap3?
Thanks for helping

Answer 1

Just do it as they did it, you can use the chrome inspector for that, but i'll describe the technique for you.
1) Create a div (or any element that you want, as long as if its not a block element you change its display to block) inside a container, in this case your form or a div containing that form.
2) Set the position of that container as relative and the modal position to absolute, if you don't set the parent position to relative, the modal will be relative to the body tag.
3) Set a fixed widht and height for your modal, lets say 200px for both, then add a top and a left property for the modal of 50%, this will center your element top-left corner relative to its parent, since you want the center of the element in the middle and not the corner, you need to do an offset adjustment, by moving up and left half its size, for this you'll use margin-top: -100px; and margin-left:-100px; which is the negative of widht/2 and height/2
Here is how your html should look like:
<div class="container">
<!-- your form here -->
<div class="custom-modal">
<!-- loading gif here -->
</div>
</div>
And here is how your css should look like:
.container{
position:relative;
}
.custom-modal {
width: 200px!important; /* Use !important in case you want to override another val*/
height: 200px;
position: absolute; /*You can use fixed too*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
display:none; /* You want it to be hidden, and show it using jquery*/
}
Now, you should set it as hidden, and when do your ajax request, you can set its visibility back with javascript.
Jquery example
// Store your modal object in a variable
var $myModal = $('.custom-modal');
// On ajax call or any event call this
$myModal.fadeIn();
// When your ajax call is done, then hide it again on the callback
$myModal.fadeOut();