JSFiddle - React, Tailwind, and code Playground

by Victor Leite

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/3/show/" data-remote-target="#myModal" data-target="#myModal">Remote modal button</button>


<div class="modal hide" id="myModal" 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">...</h3>
    </div>
    <div class="modal-body">
        <p>...</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>

CSS

.modal-edit-buttom {
    float: right;
    font-size: 18px;
    margin-right: 5px;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

JavaScript

$('[data-load-remote]').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (remote) {
        $($this.data('remote-target')).load(remote);
    }
});