如果您访问我的页面(http://www.dentalfixrx.com/local-equipment-repair/)并点击右上角的“开始使用”按钮,您将打开一个灯箱表单。
我想创建代码,以便灯箱自动显示在页面加载上。
以下是打开灯箱的代码:<a href="download-kit.html" class="lbOn" title="form"><img src="images/mobile-dental-repairs.gif" width="184" height="36"border="0" class="getstarted" /></a>
只是访问http://www.dentalfixrx.com/local-equipment-repair/download-kit.html无效
答案 0 :(得分:0)
将灯箱代码包装到父div(.parent)中并最初隐藏整个div
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" />
<a href="#" class="lbAction close" rel="deactivate"><span>Exit</span></a>
</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;
}
然后,在您网站的主页上添加以下代码:注意,这是jQuery,所以只需将jquery库添加到您的站点,无论是在标题中还是在结束体标记上方 -
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
现在在您添加jQuery的地方下面添加此代码:
<script type="text/javascript">
$(window).load(function(){ //this is pageload
$('div.parent').show(500); //500 is the animation speed
})
</script>
注意:如果
$('div.parent').show(500);
不起作用,请尝试:
$('div.parent').css('display','block');