0

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

4

1 回答 1

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');
于 2013-03-27T20:46:16.873 回答