открыть мой лайтбокс на pageload

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

Оберните Lightbox код в родительский 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');