JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="modal fade hide" id="confirmAlert">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3 id="confirmTitle">Are you sure?</h3>
</div>
<div class="modal-body">
<p id="confirmMessage">Body</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-danger" data-dismiss="modal">Yes</a>
</div>
</div>
<button class="btn" id="demo">Confirm</button>
JavaScript
$.dialog = {
confirm: function(options) {
var $modal = $('#confirmAlert');
$modal.find('.modal-body').text(options.message);
$modal.off('click.dialog', '.btn, .close')
.off('hidden')
.on('click.dialog', '.btn, .close', function() {
$(this).addClass('modal-result');
}).on('hidden', function() {
var result = $(this).find('.modal-result').filter('.btn-danger').length > 0;
$(this).find('.modal-result').removeClass('modal-result');
options.callback(result);
});
$modal.modal();
}
};
$('#demo').click(function() {
$.dialog.confirm({message: 'Click YES to confirm.', callback: function(result) {
alert('Result: ' + result);
}
});
});