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 ライブラリをサイトのヘッダーまたは body 終了タグのすぐ上に追加するだけです -

<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 に答える