JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>
    1を押すと、すぐに閉じるが、2を押すと閉じない。
    違いは、data-toggleがついているかどうか、data-toggleがあるとすでにそこでクリックイベントの処理をしているようだ。
    <a href="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js#L232">ソース</a>からもわかる。
</p>

<!-- Button to trigger modal -->
<a id="modalBtn" href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal 1</a>

<a id="modalBtn2" href="#myModal" role="button" class="btn" >Launch demo modal 2</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JavaScript

$(function(){
    $('#modalBtn').click(function(e) {
        $('#myModal').modal('show');
    });
    
    $('#modalBtn2').click(function() {
        $('#myModal').modal('show');
    });
});