Solved

Overlay screen to collect email address on page load

Posted on 2013-01-04
3
393 Views
Last Modified: 2013-01-16
Hello all experts.

I want an overlay window to open on page load (with the actual page behind it faded) so that I can collect email addresses.  So this overlay will have some content as well as a form with a textbox where they can enter their email address and press enter.

The "Thank You" page also shows up in the overlay.  Then they can close out the overlay.

They can close the overlay without doing any of the above too.

Can someone please help me with this..???

I have seen it on a few different sites out there.  My site is in PHP.

Thanx in advance.

--d.
0
Comment
Question by:driven_13
3 Comments
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 38746403
You need Jquery Modal


http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://jqueryui.com/resources/demos/dialog/modal-form.html

http://www.ericmmartin.com/projects/simplemodal-demos/
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(document).ready(function() {
        $( "#dialog" ).dialog();
    });
    </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

Open in new window


This is calling the pop up ONLOAD
    <script>
    $(document).ready(function() {
        $( "#dialog" ).dialog();
    });
    </script>

Open in new window


Selvol
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38746433
Have a look at this demo
If you want it to load at page load, you only have to add the call for the toggleOverlay function accordingly:

<body onLoad="toggleOverlay()">
0
 

Author Comment

by:driven_13
ID: 38753296
Thanx for both of your responses.

Both of your solutions seemed do-able.....for someone who knew what they were doing...[:0(

I, on the other hand, do not.

So does someone already have this built as I cannot believe that someone did not need this exact same functionality at some point in the past.

Here, briefly, is what I am looking for:

Just an overlay screen that loads on page-load with the actual page behind it faded out. This overlay will have just one email-address field for collecting emails.  Needs the basic JavaScript error-trapping for this field.  When they fill out this field and hit submit, they are to be taken to the page that is in the "action" property of the form that is in the overlay window.

This secondary page does all the work of collecting the email address and generating the Thank You message.

Thanx again for your time.

--d.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

867 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

16 Experts available now in Live!

Get 1:1 Help Now