Pop Over Form

Roderick Divilbiss Dec 28, 2007

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://www.javascriptsource.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>

Leave a Response

(10 comments)

Well, there are a few ways to do it. One, you could use the [a href="http://javascript.internet.com/navigation/greybox.html"]GreyBox technique[/a]. Also, [a href="http://dbachrach.com/blog/2006/10/09/a-cool-css-effect-dashboard/"]here is a tutorial[/a] about another method.

Lee Nov 18, 2008

Exactly what I'm looking for, but how would I go about disabling (and preferably dimming) the lower window while the popup is active? Then once submitted or canceled, the lower screen is re-enabled and lit back up?

Casey Nov 13, 2008

No, as shown in the source code for the body, it's on the same page. If you continue to have problems, you will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 6, 2008

Does the form need to be in a seperate aspx page? (or html, doent matter) I have followed the instructions and cant get this to work. >:-|

Cody Oct 7, 2008

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Underwood Jan 29, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details