打开我的灯箱载入页面

Question

如果您访问我的页面（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不起作用

Answer 1

裹灯箱码到父DIV（.parent）和隐藏整个DIV最初

HTML：

<div class="parent"> 

<div class="downloadkit"><form action="formmail.php" method="post" > 
<input type="hidden" name="recipients" value="[email protected],[email protected]com,[email protected]" /> 
<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');