Forms : Pop Over Form / The JavaScript Source

General

Use this script to create a form that will open on top of the existing page, using a hidden DIV. A default link is included to allow for JavaScript being turned off or unavailable.

Click To Open Form

Notes

Created by: Roderick W. Divilbiss
Web Site: http://www.rodsdot.com/
Posted: December 28, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: popOverForm.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Roderick W. Divilbiss | http://www.rodsdot.com/Licensed under: Creative Commons License
 */

function showForm() {
  oDiv = document.getElementById('theFormDiv');
  oDiv.style.display='block';
  return false;
}

function hideForm() {
  oDiv = document.getElementById('theFormDiv');
  oDiv.style.display='none';
  return false;
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#theFormDiv {
 	display:none;
 	position:absolute;
 	top:4em;
 	left:4em;
 	background-color:#EEE;
 	border:1px solid #000;
 	padding:1em;
 	margin:3em;
 	width:20em;
}

.nocss {
  display:none;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="popOverForm.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="theExample">
  <p><a title="open form" href="contact.php" onclick="return showForm();">Click To Open Form</a></p>
</div>

<div id="theFormDiv">
  <form method="post" id="frm">
    <fieldset>
      <legend>Contact Information</legend>
      <table>
        <tr>
          <td><label id="label-first">First Name</td><td><input name="first" type="text"></td>
        </tr><tr>
          <td><label id="label-last">Last Name</td><td><input name="last" type="text"></td>
        </tr><tr>
          <td><label id="label-email">E-Mail</td><td><input name="email" type="text"></td>
        </tr><tr>
          <td><label id="label-city">Comments</td><td><textarea name="comment" type="text"></textarea></td>
        </tr><tr>
          <td><input type="submit" id="bSubmit" name="bSubmit" value="Submit" onclick="hideForm();"></td><td>
          <input type="button" id="bCancel" name="bCancel" value="Cancel" onclick="hideForm();"></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

7. From: Cody
10/07/2008 22:54:54

8. From: Lee (Admin)
11/06/2008 11:25:10

5. From: Tanmoy Ghosh
Java Script html
12/29/2007 00:54:57

6. From: Lee Underwood (Admin)
01/29/2008 12:27:46

3. From: shaunmeloy
how to close
12/28/2007 19:07:36

4. From: Lee Underwood (Admin)
01/29/2008 12:27:21

1. From: Mike Dragonetti
Pop over form question
12/28/2007 13:57:24

9. From: Casey
disable bottom window
11/13/2008 18:00:49

10. From: Lee (Admin)
11/18/2008 11:41:54

2. From: Lee Underwood (Admin)
01/29/2008 12:25:05

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

First Name
Last Name
E-Mail
Comments

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

7. From: Cody10/07/2008 22:54:54

8. From: Lee (Admin)11/06/2008 11:25:10

5. From: Tanmoy GhoshJava Script html12/29/2007 00:54:57

6. From: Lee Underwood (Admin)01/29/2008 12:27:46

3. From: shaunmeloyhow to close12/28/2007 19:07:36

4. From: Lee Underwood (Admin)01/29/2008 12:27:21

1. From: Mike DragonettiPop over form question12/28/2007 13:57:24

9. From: Caseydisable bottom window11/13/2008 18:00:49

10. From: Lee (Admin)11/18/2008 11:41:54

2. From: Lee Underwood (Admin)01/29/2008 12:25:05

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

7. From: Cody
10/07/2008 22:54:54

8. From: Lee (Admin)
11/06/2008 11:25:10

5. From: Tanmoy Ghosh
Java Script html
12/29/2007 00:54:57

6. From: Lee Underwood (Admin)
01/29/2008 12:27:46

3. From: shaunmeloy
how to close
12/28/2007 19:07:36

4. From: Lee Underwood (Admin)
01/29/2008 12:27:21

1. From: Mike Dragonetti
Pop over form question
12/28/2007 13:57:24

9. From: Casey
disable bottom window
11/13/2008 18:00:49

10. From: Lee (Admin)
11/18/2008 11:41:54

2. From: Lee Underwood (Admin)
01/29/2008 12:25:05