2012-01-12 6 views
0

私はPHPを初めて使い慣れているので、既成のスクリプトをカスタマイズすることはまだ非常に難しいことです。DIVが存在するかどうかを示すPHPカスタマイゼーションモジュール

私はアニメーションポップアップモーダルスクリプトを持っています。これは現在、特定のものがクリックされたときに起動します。私はまた、特定のdivがページに存在するときに、この同じスクリプトを自動的に起動したいと思います。

#maskは、コードからわかるように、ページ上に黒い半透明のレイヤーです。

ここで私は調整する必要があるスクリプトです:

<a href="#" name="modal"> 

そして、私はときに、このことを自動的に実行するために取得しようとしている:このリンクをクリックしたときに

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

}); 

は現在、それが自動的に開きますDIVは、ページ上に存在する:

<div name="showintrovideo"></div> 

本当にありがとうございましたみんな、あなたは常に、このような大きな助けです! -

- アンドリュー

EDITここ

は、私が働いている完全なコードです:

HTML

<div id="boxes"> 
    <div id="qrcodemarketing" class="window"> 

     <!-- close button is defined as close class --> 
     <div style="float:right;"> 
     <a href="#" class="close"><img src="images/close_window.png" width="22"height="22" alt="Close Window" /></a> 
     </div> 

     <iframe width="640" height="480" src="http://www.youtube.com/embed/MYVIDEO" frameborder="0" allowfullscreen></iframe><br /><b>Pause the video before closing this window</b> 

    </div> 
    </div> 




    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div> 

CSS

#mask { 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:absolute; 
    background:none; 
    display:none; 
    z-index:9999; 
    padding:20px; 
    color:#fff; 
} 

.jsファイルは、それはそれはまた、クリックすると自動的に開くだけでなく、できるように、単に.jsファイルを微調整することができ、それ

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 


    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     $('#mask, .window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

}); 

を提出しますか?

ありがとうございます!

答えて

0

イントロ動画を表示するかどうかを判断するには、セッションやCookieを使用するのが最善でしょう。私はあなたのポップアップをjQuery要素で呼び出すことのできる方法でラップします。ような何か:

$('a').myPopupMethod(); 

そうすれば、あなたも、プログラムでそれを呼び出すことができます:あなたのHTMLページで

$.myPopupMethod(); 

を、あなたは、あなたのポップアップを表示するかどうかを判断するためにPHPを使用することができます。

<?php 
    session_start(); 

    $video_watched = $_SESSION['video_watched']; 
?> 
<!DOCTYPE html> 
<html> 
    <body> 
    <script src="jquery.js"></script> 
<?php if ($video_watched != true): ?> 
    <script> 
     $(document).ready(function() { 
      $.myPopupMethod(); 
     }); 
    </script> 
<?php endif; ?> 
    </body> 
</html> 
+0

解決してくれてありがとう、マーティン! また、私はこの新人だから、自分のソースコード(私は質問に追加したもの)を見て、自動開封と開封の両方のためにそれを調整する方法を知りたいですか? あなたのソリューションをどのように統合するか分かりません。私の欠点を許してください。 乾杯! – Andrew