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>
<div id="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/8/show/" 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>
</div>

CSS

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

JavaScript

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