JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal-bs3patch.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<a href="#" class="show-modal-dialog btn btn-primary">Show Modal</a>
<a href="#" class="show-nested-modal-dialog btn btn-primary">Show Nested Modal</a>
CSS
.modal-dialog {
margin: 0;
}
JavaScript
(function ($) {
$.fn.showModal = function (header, content, callback) {
var HTML = '<div class="modal fade generic-modal">' +
' <div class="modal-dialog">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
' <h4 class="modal-title">' + header +
' </h4>' +
' </div>' +
' <div class="modal-body">' + content +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
' <button type="button" class="btn btn-primary ok-button-dialog">Ok</button>' +
' </div>' +
' </div><!-- /.modal-content -->' +
' </div><!-- /.modal-dialog -->' +
'</div><!-- /.modal -->';
var container = $('<div></div>').html(HTML);
var newInstance = jQuery.extend(true, {}, container);
newInstance.find('.ok-button-dialog').bind('click', function () {
callback();
});
var modalElement = newInstance.find('.generic-modal');
modalElement.modal();
return modalElement;
}
}(jQuery));
/* ===================================== */
$('body').on('click', '.show-modal-dialog', function () {
//text content
var modalTitle = 'This is modal title';
var message = 'This is text message.';
var modal = $(this).showModal(modalTitle, message, function() {
alert('Ok button clicked');
modal.modal('hide');
});
});
/* ===================================== */
var n = 0;
$(document).ready(function () {
$('body').on('click', '.show-nested-modal-dialog', function () {
//nested modal with html content
var modalTitle = 'This is modal title';
...