Popup.js - 外部HTMLコンテンツをロードするだけで動作しない

Toddishポップアップライブラリ（https://github.com/Toddish/Popup）を使用してポップアップに外部HTMLファイルをロードしようとしています。Popup.js - 外部HTMLコンテンツをロードするだけで動作しない

私の状況は次のとおりです。外部ファイルに保存されたHTMLをポップアップに読み込みたいのですが、ドキュメントデモとまったく同じことを行ってもライブラリは単にこれを拒否します。ポップアップをトリガーするリンクをクリックすると何も起こりません。私は正しい場所にpopup.cssとjquery.popup.jsファイルを持っていて、最新のバージョンです。

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>Popup test</title> 
 

 
     <link rel="stylesheet" href="popup.css" type="text/css" /> 
 
    </head> 
 
    <body> 
 
     <a href="#" id="htmlpopup" class="popup">Click Me!</a> 
 

 
     <script src="jquery.js"></script> 
 
     <script src="jquery.popup.js"></script> 
 
     <script> 
 
      $(document).ready (function () { 
 
       $("a.popup").popup (); 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

これは私がロードしようとしているファイルがある、testcontent.html：

<i>This is some italic!</i>

これはtestpopup.htmlです

リンクを右クリックし、[新しいタブでこのページを開く]を選択すると、ブラウザ（Firefox 57.0.1）でページが表示されます。

私は手動でコンテンツを指定することができ、そのコンテンツでポップアップが表示されます。私は問題の回避策としてtestcontent.htmlにリンクしているiframeを指定することを考えましたが、iframeは悪いと聞いているので、むしろそうしないでしょう。

解決策をお持ちの人がいますか？ポップアップがブラウザで廃止され、事前に非常に

おかげで、ジョシュア

出典

2017-12-15 Joshua Schroijen

は、fancyboxまたはブートストラップモーダルを使用してみてください、下のモデルを見ます！

https://v4-alpha.getbootstrap.com/components/modal/ 

The code to popup modern 
https://codepen.io/brandonb927/pen/wJaIi 

http://fancyapps.com/fancybox/

出典

2017-12-15 14:15:47

Bootstrapを私に指摘してくれてありがとう！ –

このポインタはありがとう、ラファエル・カステラーニ！それが私の必要なものでした。ブートストラップで私のモーダルを作りました。ここで私が他の人のために作ったサンプルコードです。コードは、コメントで説明されている：

testmodal.html：

<!-- This modal example uses Bootstrap 3.3.7! --> 
 

 
<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 

 
     <title>A simple modal example</title> 
 

 
     <!-- Include Bootstrap 3.3.7 CSS here in the head section --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <!-- The data-toggle="modal" is necessary and should be copied verbatim to your code! 
 
      The data-target="#modal" is also mandatory, but you should change #modal to #<ID of 
 
      the div with class modal that contains your desired modal>. 
 
      The value of the href attribute is the file Bootstrap will load HTML into the modal from. --> 
 
     <a data-toggle="modal" data-target="#modal" href="testmodalcontent.html">Show a modal!</a> 
 

 
     <!-- This entire nested div structure is necessary for modals --> 
 
     <div class="modal fade text-center" id="modal"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <!-- The external HTML will be inserted here. 
 
         Note: you can just place the header-body-footer div structure in the 
 
         external file. For example: you could place the following in 
 
         testmodalcontent.html: 
 
          
 

 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
        </div> 
 
        <div class="modal-body"> 
 
         <p>Hello, world!</p> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> 
 
        </div> --> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Include the jQuery and Bootstrap javascript libraries. Order is important! --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

testmodalcontent.html

<h1>This is a special modal!</h1> 
 
<p>This HTML was loaded from an external file!</p>

誰かがこの恩恵を受けることを願っています:)

出典

2017-12-15 21:28:58

Popup.js - 外部HTMLコンテンツをロードするだけで動作しない

答えて

関連する問題