PHPで生成されたときにモーダルオンクリックボタンを開く

Question

ここに助けが必要です。PHPファイルからHTMLファイルにエコーされるボタンがあります。ボタンをクリックすると、モーダルが表示されます。 HTMLファイルにあります。どのように私はこの仕事をすることができますか誰にも分かりますか？

PHPエコー：

'<div class="modal fade" id="modelWindow" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">'. $row['title'] .'</h4> 
      </div> 
      <div class="modal-body"> 
     <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px"> 
     <p class="well">'. $row['description'] .'<p> 

     </div> 
     <div class="modal-footer"> 
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
      </div> 
      </div> 
     </div> 
     </div> 

      <div class="row top-buffer"> 
      <div class="col-md-6"> 
    <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px"> 
     </div> 
     <div class="col-md-6"> 
     <h3>'. $row['title'] .'</h3> 
     <p class="well">'. $row['description'] .'<p> 

     <div class="row top-buffer"> 

     <div class="col-md-5 col-md-offset-1"> 
     <img src="img/link_icon.png" class="img-rounded" width="20px" height="20px"/> 
    <a href="www.link.com">LINK</a> 
       </div> 
     <div class="col-md-6"> 

    <button class="btn btn-primary pull-right" id="btn">More...</button> 
         </div> 
        </div> 
       </div> 
      </div>' 

最初の部分は、モーダルボックスで、2番目は、モーダルをtrigggerするHTML出力

スクリプトです：

<script type="text/javascript"> 

$("#btn").click(function() { 
    $("#modelWindow").modal("show"); 
    }); 

</script> 

は、私が追加する必要がありますか外部ファイルへのスクリプトとphpの中でそれを呼び出すか、これを行う別の方法がありますか？ありがとう

Answer 1

あなたはPHPエコーにスクリプトを含めることができます。jQueryとBootstrap.jsのようなすべての依存関係がエコーされたデータをレンダリングするページに含まれていることを確認してください。

Answer 2

PHPがサーバー上で実行され、JavaScriptがクライアント（ブラウザなど）で実行されるため、Javascriptコードを直接PHPでトリガーすることはできません。だから私たちに必要なのは、ブラウザにコードを実行させる方法です。

は何あなたがが行うことができますすることで、PHPで構築している文字列に<script>などがあり、これは、ボタンクリックがするDOMに挿入されたときにjQueryとブートストラップのJavaScriptがすでにロードされている場合は

'<script type="text/javascript"> 
$("#btn").click(function() { 
    $("#modelWindow").modal("show"); 
    }); 
</script>' 

作業。ブラウザは、すべての外部スクリプトがロードされた後にのみ、それを実行することを

window.onload保証にコードを置く

'<script type="text/javascript"> 
    window.onload = function(){ 
     $("#btn").click(function() { 
      $("#modelWindow").modal("show"); 
      }); 
    } 
</script>' 

：それはあなたのために動作しない場合は、それを変更してみてください。 Mozilla Developers Network：

ロードイベントは、ドキュメントのロードプロセスの最後に発生します。 には、ドキュメント内のすべてのオブジェクトがDOM内にあり、 すべてのイメージ、スクリプト、リンク、およびサブフレームの読み込みが完了しています。