別のリンクでモーダルを開く

Question

このリンクを使用して他のリンクでモーダルを開くにはどうすればよいですか？

<a href="process.php&data=3" data-toggle="modal"data-target="#modal-view"> 
link       
</a> 

process.phpにはこのモーダルがあり、そのリンクからデータを取得したいと考えています。

<div class="modal fade" 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" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <?php $data=$_GET[data]; echo $data; ?> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Answer 1

私は、ページが読み込まれるときにモーダルを読み込むためにjavascript関数を実行する必要があると思います。

この投稿は、これを行うためにいくつか良い方法があります。要するにHow to open a Bootstrap modal window using jQuery?

を、このようなものは、ページのロード時のモーダルを開くために、他のページではJavaScriptのに必要とされるであろう：

$('#myModal').modal('show'); 

あなたはモーダルにID属性を与えて、それが一意に容易に参照できるようにする必要があるかもしれません。

Answer 2

タグ

<a id="myLink" href="process.php&data=3" data-toggle="modal"data-target="#modal-view"> 
link       
</a> 

のdivタグ

<div id="myModal" class="modal fade" 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" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <?php $data=$_GET[data]; echo $data; ?> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

にIDを追加し、リンク上のイベントをクリックして、リモートから自分のコンテンツをロード適用し、

にIDを追加し、これを試してみてください

$('a#myLink').on('click', function(e){ 
    e.preventDefault(); 
    $('#myModal').modal('show').find('.modal-body').load($(this).attr('href')); 
});