Making a full screen "popup" layer

Posted on 2006-05-21
Last Modified: 2008-01-09
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.
Question by:OliWarner
    LVL 10

    Accepted 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.
    LVL 6

    Expert Comment

    by:C TG
    I can give you a live example: -> go on the page and choose Login ... it will show you exactly what you want.
    LVL 10

    Expert Comment

    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.  

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Read about why website design really matters in today's demanding market.
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now