http://qiita.com/sofpyon/items/1e72426598eed745f031
概要
同じモーダルに、そのモーダル起動ボタンによって異なる情報を表示させることが出来ます。
方法
ボタン部分
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever = "@mdo" > Open modal for @mdo</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever = "@fat" > Open modal for @fat</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever = "@getbootstrap" > Open modal for @getbootstrap</button>
...more buttons...
<button>
の data-toggle
はmodal
、data-target
は、起動させたいモーダルのIDを指定することは変わりません。
ここで、 モーダルに渡したい情報も data-*
属性で渡すことが出来ます 。
モーダル部分
先ほどの、<button>
のdata-target
の#idと、モーダルの<div>
のid
は、同じものにしてください。
もっと言うと、labelledby
の値がどうこう、と、いろいろ設定する値がありますが、それがこの記事の本題では無いので割愛します。
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" >
<div class= "modal-content" >
<div class= "modal-header" >
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<h4 class= "modal-title" id= "exampleModalLabel" > New message</h4>
</div>
<div class= "modal-body" >
<form>
<div class= "form-group" >
<label for= "recipient-name" class= "control-label" > Recipient:</label>
<input type= "text" class= "form-control" id= "recipient-name" >
</div>
<div class= "form-group" >
<label for= "message-text" class= "control-label" > Message:</label>
<textarea class= "form-control" id= "message-text" ></textarea>
</div>
</form>
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-default" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Send message</button>
</div>
</div>
</div>
</div>
今回、モーダルのタイトルと、 recipient-name
部分に、ボタン側の data-whatever
の値を表示させます。
スクリプト
$ ( '#exampleModal' ). on ( 'show.bs.modal' , function ( event ) {
var button = $ ( event . relatedTarget ) //モーダルを呼び出すときに使われたボタンを取得
var recipient = button . data ( 'whatever ' ) //data-whatever の値を取得
//Ajaxの処理はここに
var modal = $ ( this ) //モーダルを取得
modal . find ( '.modal-title' ). text ( 'New message to ' + recipient ) //モーダルのタイトルに値を表示
modal . find ( '.modal-body input#recipient-name' ). val ( recipient ) //inputタグにも表示
})
参考
http://getbootstrap.com/javascript/#modals-related-target