JSFiddle - React, Tailwind, and code Playground

by guyong

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<div id="modal" class="modal hide">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <input class="input-xlarge"/>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
    </div>
    <div class="modal-footer">
        <a href="#" id="other" class="btn btn-danger">Show Another</a>
    </div>
</div>
<div id="modal2" class="modal hide">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <input class="input-xlarge"/>
        bar
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-danger">Show Another</a>
    </div>
</div>
<button class="btn btn-info" id="btn">Click Me</button>

JavaScript

var modal = $('#modal');
modal.modal({backdrop: true, keyboard: true, show: false});

var modal2 = $('#modal2');
modal2.modal({backdrop: true, keyboard: true, show: false});

$('#btn').click(function() {
   modal.modal('show');
});
$('#other').click(function() {
    modal2.modal('show');
});