I would like to use the modal window model as described by Keenan Payne, made with HTML5 & CSS3. For that, I simply created two files: modal.html with the HTML Modal template & modal.scss with the styling description
Modal.html
<template name="ModalSuggestion">
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</template>
and simply invoke it through this simple
{{> iconSuggest}}
{{> ModalSuggestion}}
This should be dead simple and I feel ashamed to ask for help, but the should be on top of any other windows, independently of my app layout? I must have missed something...
Is there anything particular with Meteor that does prevent this from working right away?
Thanks for your help.
CSS
.modalDialog {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 99990;
opacity: 0;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
z-index: 99999;
}'
Is there a particular reason you want to use this technique? It's not clear from your question how it isn't working for you.
An alternative way to implement a modal in meteor:
HTML:
<template name="parentContainer">
{{#if modalOpen}}
{{> modal}}
{{/if}}
<div>Some content inside parent container</div>
<button class="open-modal">Exit</button>
</template>
<template name="modal">
<div class="modal-container">
<div>Are you sure you want to exit?</div>
<button class="confirm">Yes</button>
<button class="cancel">No</button>
</div>
</template>
Javascript:
Template.parentContainer.events({
'click .open-modal' : function() {
Session.set('modalOpen', true);
});
Template.parentContainer.helpers({
modalOpen: function() {
return Session.get('modalOpen');
}
});
Template.modal.events({
'click .confirm' : function() {
Session.set('modalOpen', false);
//closes modal
//do something else
};
'click .cancel' : function() {
Session.set('modalOpen', false);
//just closes modal
};
});
CSS:
I can't really provide specific css because it will depend on the context of the modal, but one option is to position the modal absolutely with a z-index that is higher than anything else on the page:
.modal-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//z-index may be uncessary
z-index: 1; (or higher if necessary)
}
This would be a full width, full height modal that will cover anything else on the page. If you make it transparent or less than full width/height, then it will appear on top of the content behind it.
What is happening here:
The user clicks an element with an event listener attached to it, in this case it is a button with a class of 'open-modal'.
This event listener changes the value of a boolean session variable, in this case it sets the 'modalOpen' session variable to 'true'.
There is a helper function in our parent template that is watching the session variable, and will update the template whenever that variable changes, effectively adding our modal to the DOM. In this case, we're using a 'modalOpen' helper to track the 'modalOpen' session variable, and when it notices it has changed to true, it updates the template with this value. {#if modalOpen}} in the parent template notices that 'modalOpen' has changed, and because it now evaluates to 'true', it will insert our 'modal' template, represented by {{> modal}}.
We close the modal by changing the 'openModal' session variable to 'false'.
Hope that helps, and no need to be ashamed, this stuff is hard to learn. Like anything the more you do it the easier it gets.
it looks like this is a known issue when using Iron Router package... what I do use.
https://github.com/iron-meteor/iron-router/issues/711
So I'm having nearly the exact same problem as #Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.
Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/
BONUS: Feel free to grab the code for the sliding panel if you'd like :)
The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.
Once you click the 'Open Modal' button the <div class="modal-backdrop fade in"></div> covers everything! (you'll have to re-run the code to reset it)
I don't know quite how to remedy this one...Any ideas?
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
Demo
They hint at this solution in the documentation.
Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
In my case, I could fix it by adding css for the .modal-backdrop
.modal-backdrop {
z-index: -1;
}
Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.
A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property.
$('.modal').on('shown.bs.modal', function() {
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
In this case, if you are OK with changing the DOM on modal shown:
$('.modal').on('shown.bs.modal', function() {
//Make sure the modal and backdrop are siblings (changes the DOM)
$(this).before($('.modal-backdrop'));
//Make sure the z-index is higher than the backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
Although the z-index of the .modal is higher than that of the .modal-backdrop, that .modal is in a parent div #content-wrap which has a lower z-index than .modal-backdrop (z-index: 1002 vs z-index: 1030).
Because the parent has lower z-index than the .modal-backdrop everything in it will be behind the modal, irrespective of any z-index given to the children.
If you remove the z-index you have set on both the body div#fullContainer #content-wrap and also on the #ctrlNavPanel, everything seems to work ok.
body div#fullContainer #content-wrap {
background: #ffffff;
bottom: 0;
box-shadow: -5px 0px 8px #000000;
position: absolute;
top: 0;
width: 100%;
}
#ctrlNavPanel {
background: #333333;
bottom: 0;
box-sizing: content-box;
height: 100%;
overflow-y: auto;
position: absolute;
top: 0;
width: 250px;
}
NOTE: I think that you may have initially used z-indexes on the #content-wrap and #ctrlNavPanel to ensure the nav sits behind, but that's not necessary because the nav element comes before the content-wrap in the HTML, so you only need to position them, not explicitly set a stacking order.
EDIT
As Schmalzy picked up on, the links are no longer clickable. This is because the full-container is 100% wide and so covers the navigation. The quickest way to fix this is to place the navigation inside that div:
<div id="fullContainer">
<aside id="ctrlNavPanel">
<ul class="nav-link-list">
<li><label>Menu</label></li>
<li><span class="fa fa-lg fa-home"></span> Home</li>
<li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
<li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
</ul>
</aside>
<div id="content-wrap">
...
</div>
</div>
DEMO HERE
None of the answers worked well enough for me.
The problem appeared to lie where the modal windows needs to be outside of the body.and it is not best
So this code done the job just prefectly:
$('.modal ').insertAfter($('body'));
$('#product_' + product_id + ' .modal ').insertAfter($('body'));
I'm wary of moving the modal content outside its original context: other JS or styles might depend on that context.
However, I doubt there are any scripts or styles that require a specific context for the backdrop.
So my solution is to move the backdrop adjacent to the modal content, forcing it into the same stacking context:
$(document).on('shown.bs.modal', '.modal', function () {
$('.modal-backdrop').before($(this));
});
It's only a slight deviation from jacoswarts' solution, so thanks for the inspiration!
Try remove the backdrop, if you don't realy need it (data-backdrop= "false"):
<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">No Backdrop</h3>
</div>
<div class="modal-body">
<p>
Look! No backdrop here!
</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary">Ok</button> </div>
</div>
</div>
</div>
I know it is late, I encountered the same problem but I had to hack it out as below;
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
.modal{
/* bug fix - custom overlay */
background-color: rgba(10,10,10,0.45);
}
I was fighting with the same problem some days... I found three posible solutions, but i dont know, which is the most optimal, if somebody tell me, i will be grateful.
the modifications will be in bootstrap.css
Option 1:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040; <- DELETE THIS LINE
background-color: #000000;
}
Option 2:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; <- MODIFY THIS VALUE BY -1
background-color: #000000;
}
Option 3:
/*ADD THIS*/
.modal-backdrop.fade.in {
z-index: -1;
}
I used the option 2.
In my case one of parents of my modal was animated and had this
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 100;
}
The blocker here is animation-fill-mode: both;. I could not just move modal outside, so the solution was to override 'animation-fill-mode' to animation-fill-mode: none;. Animation still worked fine.
Another resolution for this problem is to add z-index: 0; to .modal-backdrop class in your bootstrap-dialog.css file if you don't want to modify bootstrap.css.
if we cannot delete backdrop and/or we have component framework such angular or vue we cannot move modal to the root. i did this trick: put my custom modal-backdrop container(with aditional class) as sibling for modal-dialog container and added some css
<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
<!-- magic container-->
<div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
....
</div>
</div>
</div>
</div>
and css
.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}
You could use this :
<div
class="modal fade stick-up disable-scroll"
id="filtersModal"
tabindex="-1"
role="dialog"
aria-labelledby="filtersModal"
aria-hidden="false"
style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>
Adding style="" and data-backdrop false would fix it.
For those using ASP.NET MVC,
Needing to move the modal div just before the </body> tag but can't do it because you are using a Layout page
Define a section in you _Layout.cshtml file just before the body tag, eg:
... some html in layout page ...
#RenderSection("bottomHTML", required: false)
</body>
</html>
Then in your view
#section bottomHTML
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}
This way, the modal HTML will be rendered before the body tag and the modal now should be displayed correctly..
If you use JQuery, you can use the appendTo() to append the modal to a specific element, in this case, the , in most case, a simple one line can move your modal on top of the backdrop regardless where your modal div's position
$("#myModal").appendTo("body");
here's the reference of the JQuery appendTo function:
http://api.jquery.com/appendto/
I updated it to your fiddle
http://jsfiddle.net/ZBQ8U/240/
Just remove the backdrop, insert this code in your css file
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
The problem persists if any ancestor of the [.modal] element has CSS property z-index set.
The [.modal] element inherits the CSS z-index from that container element.
While the [.modal-backdrop] is inserted into the [body] element dynamically from jQuery code, which has default z-index: 1040 from bootstrap.css.
I came out with two way CSS solution, is better than changing any other behavior of the default event and element.
Set the z-index: 1041 or higher value for the parent element of the [.modal], that ancestor element is causing the [.modal] is underneath the [.modal-backdrop].
Or
Set the z-index: 1039 or lower value for the [.modal-backdrop] in CSS file, if available. Because the HTML [.modal-backdrop] is not available in your code.
[Note: the CSS z-index property may require using !important flag]
[Note: default z-index: 1040 for [.modal-backdrop] is completely depended on bootstrap.css]
just remove z-index: 1040;
from this file bootstrap.css class .modal-backdrop
I was missing the follow html
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
added it and worked without problems
Since I don't have the chance to move the modal markup since i added it in a partial template within a conditional what worked for me is add CSS bellow
.modal.fade {
display: none;
}
Then, when boostrap add class "in" through js apply display: block and everything works fine.
I Found that applying ionic framework (ionic.min.cs) after bootstrap coursing this issue for me.
If you can't put the modal to the root (if your use angular and the modal is in a controller for example), modifying bootstrap or using js is obviously a bad solution.
so saying you have your website structure:
//not working
<div>
<div>
<div>
<modal></modal>
</div>
</div>
</div>
open your code inspector and move the modal to the root, it should be working (but no where you want):
//should be working
<div>
<div>
<div>
</div>
</div>
</div>
<modal></modal>
now put it in the first div and check if it's working: if yes check the next child until it's not working and find the div that is the problem;
//should be working
<div>
<div>
<div>
</div>
</div>
<modal></modal>
</div>
Once you know which div is the problem you can play with the css display and position to make it work.
everyone has a different structure but in my case setting a parent to display: table; was the solution
Put this code wherever you want
$('.modal').on('shown.bs.modal', function () {
var max_index = null;
$('.modal.fade.in').not($(this)).each(function (index , value){
if(max_index< parseInt( $(this).css("z-index")))
max_index = parseInt( $(this).css("z-index"));
});
if (max_index != null) $(this).css("z-index", max_index + 1);
});
Many times , you cannot move the modal outside as this affects your design structure.
The reason the backdrop comes above your modal is id the parent has any position set.
A very simple way to solve the problem other then moving your modal outside is move the backdrop inside structure were you have your modal. In your case, it could be
$(".modal-backdrop").appendTo("main");
Note that this solution is applicable if you have a definite strucure for your application and you cant just move the modal outside as it will go against the design structure
just move your modal outside of all div contents, place it mostly prior to closing of body.
First make sure the modal is not in any parent div.
Then add
$('#myModal').appendTo("body")
It worked fine for me.
In Addition to all answers here, i found out, that the bootstrap4 "animated fadeIn" is also causing this error (not clickable modal behind background):
check if your modal is in the following parent tag (bootstrap animation)
<div class="animated fadeIn"></div>
I removed this tag - solved the problem for me.
this works for me.
<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
<asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Email</asp:LinkButton>
<asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
OnClick="ModalRecovery">Text</asp:LinkButton>
</div>
</div>
</div>
var element = $('#modalDecision');
// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function (e) {
// keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
$(element).append($(backDrop));
});
i encountred this problem, and after investigating my css, the main container (direct child of the body) had:
position: relative
z-index: 1
the backdrop worked well after i removed those two properties. You may also encounter this problem if the main wraper have a position: fixed
I had a similar problem that the fade was not working and the overlay stayed on the page.
I had dynamic content added back to the page (refresh on some content only on modal action).
I also had this $('#rejectModal-'+itemId).modal('hide') (itemId is dynamic id for multiple modals in a single page for rejecting some information) but the problem was still not gone.
The overlay was staying because my layout was not set to null in the partial view
After setting this the problem was gone:
#{
Layout = null;
}
if you have nested modals this is the clue :
$('body').on('shown.bs.modal', '.modal', function (e) {
e.stopPropagation();
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
I have a lenghty ASP.NET page load process.
Is there a way to display a loading gif while the ASP.NET page loads?
Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is discarded as soon as I redirect the user to the real page...
Any clue? Thanks
You can use an UpdateProgress control for this, like this:
<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Here are some styles you can use if you want it to be semi-transparent:
#overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #f8f8f8;
width: 100%;
height: 100%;
filter: Alpha(Opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
}
#theprogress {
background-color: #fff;
border:1px solid #ccc;
padding:10px;
width: 300px;
height: 30px;
line-height:30px;
text-align: center;
filter: Alpha(Opacity=100);
opacity: 1;
-moz-opacity: 1;
}
#modalprogress {
position: absolute;
top: 40%;
left: 50%;
margin: -11px 0 0 -150px;
color: #990000;
font-weight:bold;
font-size:14px;
}
Please see my similiar question "Please Wait" message using jQuery or AJAX?:
While the ASPX page loads, you will stay on the current page in the web browser. So when you know the new page is loading (i.e., when a button or link is pressed), simply show the "Loading" image and it will automatically disappear when the client is finished receiving the "new" page (whether it be an actual new page or the same page posted back).
Example code you can use to automatically show your loading image (contained in a div) when a submit button is clicked is the following:
$(':submit').click(function() {
$('#divLoading').show();
});
Alternatively, you can use the UpdatePanel that comes in the Ajax Toolkit or in ASP.NET 4.0. It has a control called UpdateProgress that displays a loading image automatically.
EDIT:
I think you mean you want to show a "Loading" image before your first page is even loaded, in which case you should put your master page content wrapped around an UpdatePanel, use a progress loader control that automatically shows an image (both available in the Ajax Toolkit or ASP.NET 4.0), and load the substantial (non-master page) content of your page after your initial page load in the UpdatePanel.
You can do this by putting the body of your content page inside a Panel, setting the panel's visibility to False, and then setting it to True after the page loads.
Markup for an UpdateProgress control is as follows. You would, of course, want to style it and position it in the right area.
<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
<ProgressTemplate>
<div id="theprogress">
<img src="images/loading.gif" />
<span>Loading</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
EDIT:
If you don't want to use the UpdatePanel and UpdateProgress controls, then simply do the following:
Put your page content in a Panel called pnlContent and set the panel's visibility to False.
Create an img and your loading image and put it in a separate Panel called pnlLoading with the visility set to True.
Put a client-side script that forces the page to reload as soon as it loads. Put this script inside pnlLoading. Update: Put the #3 code below in your ASPX page to create your panel and it will trigger a post back immediately.
Add the following #4 code to your Page_Load.
Code:
For #3:
<asp:Panel runat="server" ID="pnlLoading">
<!-- Replace "form1" with your form's name. -->
<script type="text/javascript">form1.submit()</script>
<img src="images/loading.gif" alt="Loading" />
<span>Loading</span>
</asp:Panel>
For #4:
if (Page.IsPostBack())
{
pnlLoading.Visible = false;
pnlContent.Visible = true;
}
That will cause a loading image to show while your actual page content is being loaded.
I found the following solution works nicely between page navigations without affecting the current Ajaxification or site structure.
Just drop the script in no-mans-land between the head end and body start tags on your Master page.
Thanks to Subin for this one.
http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript
<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
document.documentElement.style.overflow="hidden";
var subinsblog=document.createElement("div");
subinsblog.id="subinsblogldiv";
var polu=99*99*99999999*999999999;
subinsblog.style.zIndex=polu;
subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
subinsblog.style.backgroundPositionX="50%";
subinsblog.style.backgroundPositionY="50%";
subinsblog.style.position="absolute";
subinsblog.style.right="0px";
subinsblog.style.left="0px";
subinsblog.style.top="0px";
subinsblog.style.bottom="0px";
if(subinsblogla==0){
document.documentElement.appendChild(subinsblog);
subinsblogla=1;
}
}else if(document.getElementById('subinsblogldiv')!=null){
document.getElementById('subinsblogldiv').style.display="none";
document.documentElement.style.overflow="auto";
}
},1000);
</script>
He recommends you do not replace the variable names, because there might be an other variable like that and the code won't work.
If you want to change the Loading Image just change the background URL in the variable subinsblog.style.background.
Is it possible for asp.nt ascx controls to have their own client side load event, like a window.onload for each, so I can hide the loading divs and show the content div when http transfer is complete.
I have image menus and cycle galleries that seriously need some loading progress don't know how to implement them. The site is http://techlipse.net. Thx in advance.
There are a few ways you can do this. I would take advantage of the fact that the onload event is not triggered until all content on the page is completely loaded. Since it looks like your site is already using jQuery, all of the examples below will use that.
In your user controls, you can have them hidden by default. To do this, place a style attribute in a wrapper tag for your control:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
Inside of your control, you can then have JavaScript code like this (assuming jQuery will be included at the top of the page, which is the way your site is now). This would be placed directly in your control.
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
To explain how this works...
When the browser initially loads the page, the control defaults to being hidden. It will not be rendered at all. jQuery subscribes to the load() event of your page. When the load event triggers, it will then display the control. This only happens once everything is finished loading.
You can also hide any "loading..." <div /> in this load event also.
Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. A "loading" div and a "content" div. The loading div would be shown by default with a generic loading message. The content div would be hidden by default (or just hidden behind an overly like my example below). The onload event removes the loading objects from the page and allows the images to be shown.
This example below displays a loading message over top of the entire page until it is finished loading.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>
You can add a listener to the load event... ( don't tie into the event directly as you might cause a different tie in to not be called )
Try using a JS library to help you listen to events, YUI, jQuery are fun.
http://developer.yahoo.com/yui/event/#start
var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);
YUI Library has a way to listen to when an area is "ready"
http://developer.yahoo.com/yui/event/#onavailable
You could have a listener that waits so see when a div is loaded, and then fire off some ajax to your long running processes.