open my lightbox on pageload - lightbox

Question

If you visit my page (http://www.dentalfixrx.com/local-equipment-repair/) and click the "get started" button at the top right you will open a lightbox form.
I would like to create code so the lightbox appears on page load automatically.
Here is the code to open the lightbox currently: <img src="images/mobile-dental-repairs.gif" width="184" height="36"border="0" class="getstarted" />
simply visiting http://www.dentalfixrx.com/local-equipment-repair/download-kit.html does not work

Answer 1

Wrap the lightbox code into a parent div (.parent) and hide that whole div initially
HTML:
<div class="parent">
<div class="downloadkit"><form action="formmail.php" method="post" >
<input type="hidden" name="recipients" value="brian#dentalfixrx.com,billdonatojr#gmail.com,andy#dentalfixrx.com" />
<input type="hidden" name="subject"value="New DentalFixRx Lead!" />
<input type="hidden" name="good_url" value="thanks-downloadkit.php" />
<div style=" width:300px; position:absolute; right:10px; top:15px;">
<h1 style="font-size:20px; margin:5px auto;">Emergency Fix Needed?</h1>
To receive a fast response, please complete the form below and click the "submit" button.
</div>
<p><label>Name/Business:<span class="red">*</span></label><input type="text" name="name" id="name" /></p>
<p> <label> Phone:<span class="red">*</span></label> <input type="text" name="phone" id="phone" / > </p>
<p> <label>Email:<span class="red">*</span></label> <input type="text" name="email" id="email" / ></p>
<p> <label>State:</label> <input type="text" name="st" id="st" / ></p>
<p> <label>Zip Code:</label> <input type="text" name="zip" id="zip" / ></p>
<p> <label>Service Needed:</label><select name="">
<option>Select one</option>
<option>Handpiece Repair</option>
<option> -Low Speed</option>
<option> -High Speed</option>
<option> -Electric High Speed</option>
<option>Equipment Repair</option>
<option> -Autoclaves</option>
<option> -Chairs & Delivery Units</option>
<option> -Compressors</option>
<option> -Vacuum Pumps</option>
<option> -Ultrasonic Scalers</option>
<option> -Instrument Sharpening</option>
<option> -Upholstery</option>
<option> -Curing Lights</option>
<option> -Film Processors</option>
<option>Other Service</option>
</select></p>
<p> <label>Select type of request:</label><select name="">
<option>Select one</option>
<option>Just a casual question</option>
<option>I need some help but it's not super time-sensitive</option>
<option>Things are broken and I'd like them not to be!</option>
<option>I can't get things done, please reply ASAP</option>
</select></p>
<div class="clear"></div>
<input value=" " type="submit" class="download-btn" width="231px" height="36px" />
<span>Exit</span>
</form></div>
</div>
CSS:
div.parent
{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: 'Myriad Pro', Arial, sans-serif !important;
font-size: 22px !important;
border: 2px solid #aaa;
z-index: 1040;
-moz-box-shadow: 0px 0px 20px 2px #ccc;
-webkit-box-shadow: 0px 0px 20px 2px #ccc;
box-shadow: 0px 0px 20px 2px #ccc;
background: rgb(54, 25, 25); /* Fall-back for browsers that don't
support rgba */
background: rgba(255, 255, 255, .7);
}
div.downloadkit
{
position: fixed;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
Then, on your home page of your site, add the following code: Note, this is jQuery, so just add the jquery library to your site, either in the header or just above the closing body tag -
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Now add this code right below where you added jQuery:
<script type="text/javascript">
$(window).load(function(){ //this is pageload
$('div.parent').show(500); //500 is the animation speed
})
</script>
NOTE: If
$('div.parent').show(500);
does not work, try:
$('div.parent').css('display','block');