jqueryとjquery.mobileを一緒に使用するとCSSが動作しません

Question

私のページでは、jquery（2.2.0）とjquery.mobile（1.4.5）を使用しています。これまでは魅力的でしたが、今は純粋なCSS3モーダルポップアップを使用しようとしていて、jqueryライブラリのために動作しません。私は両方のページにポップアップが動作しませんが、私はそれらのいずれかを削除する場合、それは正常に動作を開始します。私は今起こっていることをデバッグしようとしましたが、今は運がありません。

私はコードを掲載しています。誰もがこれを手伝ってくれることを願っています。

<div> 
    <div class="partnerLlistat"> 
     <a id="link2" href="#popup2"> 
      <div id="partnerBox2" class="partnerBox"> 
       <h3>Nom: aaa</h3> 
       <p>Tipus de servei: aaa</p> 
      </div> 
     </a> 

     <div id="popup2" class="overlay"> 
      <div class="inpopup2"> 
       <h3>Nom: aaa</h3> 
       <a class="close" href="#">&times;</a> 
       <h4>Entitat: aaa</h4> 
       <p>Tipus de servei: aaa</p> 
        <p>Adreça: aaa</p> 
        <p>Telèfon: 111</p> 
        <p>Pàgina web: <a ref="external" target="_blank" href="http://aaa.net">http://aaa.net</a></p> 
        <p>Correu electrònic: aaa@gmail.com</p> 
        <p>Avantatge que ofereix: aaa aaa</p> 
      </div> 
     </div> 

     <a id="link3" href="#popup3"> 
      <div id="partnerBox3" class="partnerBox"> 
       <h3>Nom: bbb bbb</h3> 
       <p>Tipus de servei: bbb</p> 
      </div> 
     </a> 

     <div id="popup3" class="overlay"> 
      <div class="inpopup3"> 
       <h3>Nom: bbb bbb</h3> 
       <a class="close" href="#">&times;</a> 
       <h4>Entitat: bbb</h4> 
       <p>Tipus de servei: bbb</p> 
        <p>Adreça: bbb</p> 
        <p>Telèfon: 111</p> 
        <p>Pàgina web: <a ref="external" target="_blank" href="http://bbb.net">http://bbb.net</a></p> 
        <p>Correu electrònic: bbb@gmail.com</p> 
        <p>Avantatge que ofereix: bbb bbb</p> 
      </div> 
     </div> 

     <a id="link4" href="#popup4"> 
      <div id="partnerBox4" class="partnerBox"> 
       <h3>Nom: ccc ccc</h3> 
       <p>Tipus de servei: ccc</p> 
      </div> 
     </a> 

     <div id="popup4" class="overlay"> 
      <div class="inpopup4"> 
       <h3>Nom: ccc ccc</h3> 
       <a class="close" href="#">&times;</a> 
       <h4>Entitat: ccc</h4> 
       <p>Tipus de servei: ccc</p> 
        <p>Adreça: ccc</p> 
        <p>Telèfon: 111</p> 
        <p>Pàgina web: <a ref="external" target="_blank" href="http://ccc.net">http://ccc.net</a></p> 
        <p>Correu electrònic: ccc@gmail.com</p> 
        <p>Avantatge que ofereix: ccc ccc</p> 
      </div> 
     </div> 

     <a id="link5" href="#popup5"> 
      <div id="partnerBox5" class="partnerBox"> 
       <h3>Nom: ddd ddd</h3> 
       <p>Tipus de servei: ddd</p> 
      </div> 
     </a> 

     <div id="popup5" class="overlay"> 
      <div class="inpopup5"> 
       <h3>Nom: ddd ddd</h3> 
       <a class="close" href="#">&times;</a> 
       <h4>Entitat: ddd</h4> 
       <p>Tipus de servei: ddd</p> 
        <p>Adreça: ddd</p> 
        <p>Telèfon: 111</p> 
        <p>Pàgina web: <a ref="external" target="_blank" href="http://ddd.net">http://ddd.net</a></p> 
        <p>Correu electrònic: ddd@gmail.com</p> 
        <p>Avantatge que ofereix: ddd ddd</p> 
      </div> 
     </div> 
    </div> 
    <div style="height:125px"></div> 
</div> 

CSSコードを正しくフォーマットする方法がわからないので、jsfiddleリンクで確認してください。

ご覧のとおり、jsfiddleでは正常に動作していますが、ライブラリを正しく挿入する方法がわからないためです。それを試みる最善の方法は、あなたのコンピュータでそれをすることです。

check the code

Answer 1

OK。私は解決策を見つけた。 これは、jQueryとJQuery.mobile宣言の間で、このスクリプトを定義する必要があります：

<script> 
    // Preload configuration 
    $(document).on("mobileinit", function() { 
     $.mobile.autoInitializePage = false; 
    }); 
</script> 

これはJQuery.mobileは自動的に何かを初期化することを防ぐことができます。

はまた、デフォルトでは、jQueryのモバイルは可視性を設定していることに注意してください：要素の上に隠された、あなたはそれを上書きするCSSルールが必要になりますので：

body { 
    visibility : visible !important; 
} 

私は解決策hereを見つけました。この他のスレッドで解決策を提供したJasperに感謝します。