I’m having problems with a jquery overlay box. It works with a little bit of content in the overlay box, but I have a long form that is getting cut off at the top and bottom. Is this just too much info for a overlay box? I also attached a folder with the files.
Thanks ,
- Aaron
here is the js
<script language="javascript">
function showOverlayBox() {
//if box is not set to open then don't do anything
if( isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>
Here is my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OverlayBox</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<!--script language="javascript" src="jquery-ui-personalized-1.6rc2.packed.js"></script-->
<link rel="stylesheet" media="screen" href="css/form.css" >
<style type="text/css">
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
/*border:5px solid #09F;*/
position:absolute;
display:none;
width:800px;
margin:0px auto;
background-color:#fff;
/*height:3000px;*/
}
.overlayContent {
padding:100px;
}
.closeLink {
float:right;
color:white;
}
a:hover { text-decoration:none; }
h2 {
padding:5px;
margin:0;
}
</style>
</head>
<body>
<!-- normal page content would be here -->
<!-- this is the overlay box -->
<div class="bgCover"> </div>
<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">X</a>
<form class="contact_form" action="scripts/procProjectForm.php" method="post" name="contact_form" enctype="multipart/form-data">
<input type="hidden" name="uploadtoken" value="<?= $upload_token ?>" />
<input type="hidden" name="callback" value="<?= $callback_url ?>" />
<ul>
<li>
<h2>Start A Project</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="project_title">Project Title:</label>
<input type="text" name="project_title" placeholder="Project Title" required />
<span class="form_hint">Enter a title for new project</span>
</li>
<li>
<label for="city">City:</label>
<input type="text" name="city" placeholder="city" required />
<span class="form_hint">Enter city where project will be based out of. </span>
</li>
<li>
<label for="state">State:</label>
<input type="text" name="state" placeholder="state" required />
<span class="form_hint">Enter state where project will be based out of. </span>
</li>
<li>
<label for="zip">Zip Code:</label>
<input type="text" name="zip" placeholder="zip" required />
<span class="form_hint">Enter zip code where project will be based out of. </span>
</li>
<li>
<label for="status">Project Status:</label>
<select name='status' >
<option value="1">Development</option>
<option value="2">Pre-Production</option>
<option value="3">In-Production</option>
<option value="4">Post-Production</option>
<option value="5">Completed</option>
</select>
<span class="form_hint">Select project Status. </span>
</li>
<li>
<label for="format">Format:</label>
<select name='format' >
<option value="1">48 Hour Film Project</option>
<option value="2">Behind The Scenes</option>
<option value="3">Short Film</option>
<option value="4">Feature Film</option>
<option value="5">Documentary</option>
<option value="6">Series</option>
</select>
<span class="form_hint">Select project format. </span>
</li>
<li>
<label for="genre">Genre:</label>
<select name='genre' >
<option value="1">Sitcoms</option>
<option value="2">Reality</option>
<option value="3">Sports</option>
<option value="4">Specialty</option>
<option value="5">Comedy</option>
<option value="6">Drama</option>
<option value="7">Action</option>
</select>
<span class="form_hint">Select project genre. </span>
</li>
<li>
<label for="proj_summary">Project Summary:</label>
<textarea name="tags" cols="40" rows="6" required ></textarea>
</li>
<li>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<label for="thumb">Project Box Cover:</label>
<input type="file" class='file' name="thumb" size="30" required />
<span class="form_hint">aaa</span>
<span class="thumb_hint"> Image must be 250px wide & 380px tall.</span>
</li>
<fieldset>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select project genre. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
<fieldset>
<legend><a href="" onClick="addField();" >Add Additional Positions:</a></legend>
</fieldset>
<li>
<button class="submit" type="submit" value="Upload">Submit Form</button>
</li>
</ul>
</form>
</div>
</div>
</div>
<a href="#" class="launchLink">Launch Window</a>
</body>
</html>
here is my css for the actual form in the overlay
/* === Remove input autofocus webkit === */
*:focus {outline: none;}
/* === Form Typography === */
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
width:800px;
margin:0px auto;
}
form{
margin:30px
}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
/* === List Styles === */
.contact_form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
margin-:0px;
padding:0px;
}
.contact_form li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
border-bottom:1px solid #777;
}
/* === Form Header === */
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
/* === Form Elements === */
.contact_form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input {
height:20px;
width:220px;
padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
/* form element visual styles */
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
padding-right:30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(../images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(../images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
/* === Form hints === */
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\\25C0";
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
/*for file upload*/
.contact_form input:focus + .thumb_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
/* === Button Style === */
button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}