Div Overlay - "Please Wait" - On Submit

Check this out I think this is exactly what you need
http://particletree.com/features/lightbox-gone-wild/

I've actually already seen that one... couldn't get it to work with form submit and gave up in about 3 minutes and moved on.  If you can provide a sample of a form, that would be great.

Perhaps I should elaborate a bit...  it's easy to get the box to display, just add class="lbOn" to the <form> tag.  However, that just displays a default loading message located in addLightboxMarkup() of lightbox.js.  What I'd like to do is have it load an external script in the lightbox area (just as the examples provide).  The example do this by pulling up the page that is being linked to.  For example,

<a href="somepage.html" class="lbOn">Click Here</a>     will display the lightbox and load somepage.html into the lightbox.

Can this be done when a submit button is pressed?

The other issue with my last statement (just adding class="lbOn" to the form) is that the form is not processed.  The lightbox is triggered... and the form is not sent.

b0lsc0tt,

Thanks - that's getting me closer.  Is there a way to display a slighly transparent, dark colored div over the entire window instead of changing the body background color?  I have form fields that are on the main screen.  Those should be covered up by the darker div and only the small lightbox window be fully visible.  (hopefully that makes sense)

The ajax that you have in your code will be handy.  Since this is a page where users upload files, some large files can take a bit of time.  I've already found some handy php extensions for displaying a progress bar.  So, the finaly product should be:  The user selects files to upload and clicks the 'Upload Files' button.  Immediately, the lightbox should be triggered, overlaying a div (of some sort) covering the entire page (on top of all the elements...FYI there are no <select> fields... so those won't be a problem in some browsers like IE and overlaying divs).  The lightbox will open a file such as file_upload_status.php.  For now, that file will simply output, "Uploading... Please Wait".  Later, I'll incorproate the progress bar php extension.  Meanwhile... the form on the main page is still uploading files.  When it is complete, it just posts back to itself.

Does this help and make sense of what I'm trying to do?  It looks like I'll be able to complete it with your sample, however, one change being with the overlaying div vs the changing the body background color.  Thanks for your help.

That shouldn't be too hard to do.  Is it just the form that needs to be covered?  Is it a specific size on the page?  Can you provide the html/style or at least the details on the general layout of the form and page?  I can use that as I adapt my example above.

bol

The page is rather long... so I won't clutter this post too much.  What I'm looking to do is fairly simple by describing.

The page has a header,footer,menu bar, links, etc.  Obviously, between the header/footer (and below the menu items) there is a file upload form with multiple <input type="file"> fields (users can upload multiple files at once).  Because the page could potentially take 30-60 seconds (or more) to upload the files, I wanted to cover the entire page with a dark overlay and place a box in the center with a "uploading, please wait" message.  It should look like http://www.huddletogether.com/projects/lightbox/, however, not allow the user to close the "lightbox" by clicking outside.  The please wait/lightbox/overlay should remain until the upload finishes and the page automatically reloads (it just posts back to itself).

The small "please wait" lightbox deal (assuming that it is a div), would use ajax (just like your example) and pull data from a script called uploadStatus.php.  Right now, I'll just have uploadStatus.php output "Uploading...  Please Wait".  Later, I'll add a progress bar.

Using the example you provided, the body turned dark, however, the images in the header/footer, menu bar, form fields, and the rest of the graphics and tables with backgrounds remained in front of the dark body.  The dark overlay should be placed over the entire page, thus, making the entire page disabled until it finishes.

The major piece I'm looking for here is...  using the example your provided, can it be altered to cover the entire page with a dark overlay with the lightbox on top of that?  I haven't been very successful with covering an entire page with a div and be cross-browser compliant.

I think I've got it working with a div overlay with the following:

<style>
#overlay{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:5000;
  background-color:#000;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
</style>
<div id="overlay"></div>

When the submit button is pressed, I set the overlay.style.display='block' and have another div as the lightbox.  My only issue with the above is that IE leaves a ~20px gap on the right-hand side of the window.  Any idea how to get rid of this without another div overlay 20px in width just for IE?

You can get that CSS to work in IE by a little style to the body tag.

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Let me know if you have a question or need more info.

bol

Thanks very much...  great help.

Your welcome!  I'm glad I could help.  Thanks for the fun question, the grade and the points.

bol