Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3315
  • Last Modified:

Making a full screen "popup" layer

What I want to do is fairly simple but I just can't seem to find any relevant code on it.

I have an AJAX form (irrelevant to this really) which when an error happens, I want there to be a full-screen layer cover the entire page and display a message and maybe some options to the user.

So yeah... What do I need? Code and/or live examples would help me get this out the door asap.
  • 2
1 Solution
Creating a full page layer is almost impossible to do for several reasons.  Instead, put the whole form in a <div>.  Create another <div> after the form with your error message and options.  Initially,  set the first div with the form visible, and the second div to be hidden.  Then, if the error occurs, switch the two via javascript.


<div id="formdiv" style="display: block;">
<form id="form1" name="form1" method="POST" action="somefiletosendto">
  <input type="text" name="textfield" />
    <input type="text" name="textfield2" />
    <input type="submit" name="Submit" value="Submit" />
<div id="errordiv" style="display:none;">
Something's gone wrong.
<a href="1.html">Click Here</a>
<a href="2.html">Click Here</a>
<script language="javascript" type="text/javascript">
function ErrorPop() {
  document.getElementById('formdiv').style.display = "none";
  document.getElementById('errordiv').style.display = "block";

When the error occurs, just call the ErrorPop() function.

I know it's not exactly what you're looking for, but where this works in most browsers, covering a whole page with a layer really doesn't because of browser differences..and since java has to be functioning for your ajax form to work in the first place, this should work fine on most any browser.
C TGChief Software ArchitectCommented:
I can give you a live example: http://www.backbase.com/ -> go on the page and choose Login ... it will show you exactly what you want.
That doesn't actually cover the whole layer, though.  Just the visible part of the screen.  If you scroll down, the rest of the page is unaffected.  And not all browsers react well to this method either.  And it is actually possible to extend it by putting an empty div at the very bottom of the page and then using the location of it to figure out the height.  But it can sometimes cause anomalous results.  My method, while it doesn't have the nice background effect, does remove everything from the page that could be clicked on that could interfere with the navigation of the now error-stated page.  

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now