A jQuery modal wait dialog
The jQuery
UI modal dialogs are great add-ons but they don’t necessary fit well when you just
have to show a wait message while a page
loads. There are issues with removing the title bar and styling the dialog.
BlockUI is another alternative but I find it little hard to style using css.
This is how
I come up with a waiting dialog. Just to make it look little neat I am using two div tags here. One will cover the page content whereas the next on will
display an animated image.
I need a transparent
background (opacity of 0.8) div which covers the entire page, this way
page content will still be visible but users can’t perform any action.
#loading-div-background
{
display:none;
position:fixed;
top:0;
left:0;
background:black;
width:100%;
height:100%;
}
|
Another will contain the animated image. This div should be positioned
centrally in the page. Here is great article about positioning a div.
#loading-div
{
width: 300px;
height: 200px;
background-color: #0c0b0b;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-150px;
margin-top: -100px;
}
|
Script
<script
type="text/javascript">
$(document).ready(function () {
$("#loading-div-background").css({
opacity: 0.8 });
});
function ShowProgressAnimation() {
$("#loading-div-background").show();
}
</script>
|
I am
assigning the opacity property through jQuery css method as it will take care
of all browser compatibility problems.
Also I
have written a method which will set the visibility of the background div to
visible. This can be invoked during form submit or however you like. In this
demo I am triggering through a button click event.
HTML
<button
id="show"
onclick="ShowProgressAnimation();"
>Show dialog</button>
<div
id="loading-div-background">
<div
id="loading-div"
class="ui-corner-all"
>
<img
style="height:80px;margin:30px;"
src="images/loading.gif"
alt="Loading.."/>
<h2
style="color:gray;font-weight:normal;">Please
wait....</h2>
</div>
</div>
|
I have a
button which will bring up the background div.
Also the
animated loading image will be contained in another div tag along with “Please
wait…” text.
Demo
#someDiv
{
width:200px;
height:250px;
background:rgb(33,177,60);
margin:5px;
margin-left:0px;
display:none;
}
.visiblediv
{
visibility:visible;
}
.hidden
{
display:none;
}
#loading-div-background
{
display:none;
position:fixed;
top:0;
left:0;
background:black;
width:100%;
height:100%;
z-index:1000;
}
#loading-div
{
width: 300px;
height: 200px;
background-color: #0c0b0b;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-150px;
margin-top: -100px;
z-index:1001;
}
#loading-div h2
{
font-family:Segoe UI,Calibri,Tahoma;
text-decoration:none;
}
Please wait....
Related Articles:
-
Advertise here with BSA Info: This is a review of a paid resource. There are lots of jQuery... Read Full Story » -
Advertise here with BSA Many of us probably heard the EU Cookie Law already and thinking about... Read Full Story » -
Advertise here with BSA Many of us probably heard the? EU Cookie Law already and thinking... Read Full Story » -
jQuery E-Books Collection (PDF) English | PDF | Ebook Collection | All In One | 561 MB... Read Full Story » -
I'm designing this ( http://omgcarlos.com/demo/omgDynami-forms/ ) dynamic form for a client... Read Full Story »
Comments
