JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<a href="#" id="modal1">Open Modal 1</a>
<a href="#" id="modal2">Open Modal 2</a>
<a href="#" id="modal3">Open Modal 3</a>

<div id="myModal" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">Close</a></div>
</div>

JavaScript

!function($, window, undefined){
    var el = $('#myModal');
    var defaults = {
        title: '',
        content: '',
        open: false,
        buttons: [
            {
                label: 'Close',
                cssClass: 'btn',
                attributes: {
                    'href': '#',
                    'data-dismiss': 'modal'
                }
            }
        ]
    };

    // constructor
    var Modal = function(element, options) {
        this.el = $('<div class="modal"></div>').append(el.html());
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this.init();
    };

    // private
    function renderModal() {
        var base = this,
            options = base.options;

        var buttons = [];
        $.each(options.buttons || [], function(index, current) {
            var btnProperties = $.extend({
                label: 'Close',
                cssClass: 'btn',
                attributes: {
                    'href': '#'
                }
            }, current);

            buttons.push(
                $('<a>' + btnProperties.label + '</a>')
                    .attr(btnProperties.attributes)
                    .addClass(btnProperties.cssClass)
                    .data('callback', btnProperties.callback)
            );
        });
        
        base.el
            .find('.modal-header .modal-title')
                .empty().append(options.title || '').end()
            .find('.modal-body')
                .empty().append(options.content || '').end()
            .find('.modal-footer').empty().append(buttons);
    }

    function resizeModal(width, height) {
        this.el.find('.modal-body').css({
            width: width,
            height: height
        });
    }

    // public
    Modal.prototype = {
        init: function() {
            var base = this;
            
            // attach click event handler if element is not window
            if (base.element !==...