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, document, undefined){
    var modalWindow;
    
    var el = $('#myModal');

    var defaults = {
        title: '',
        content: '',
        open: false,
        buttons: [
            {
                label: 'Close',
                cssClass: 'btn',
                attributes: {
                    'href': '#',
                    'data-dismiss': 'modal'
                }
            }
        ]
    }

    // constructor
    modalWindow = 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;

        // set header
        base.el.find('.modal-header .modal-title').html(options.title || '');

        // set content
        base.el.find('.modal-body').html(options.content || '');

        // set buttons
        var footer = base.el.find('.modal-footer').empty();
        $.each(options.buttons || [], function(index, current) {
            // button defaults
            var btnProperties = $.extend({
                label: 'Close',
                cssClass: 'btn',
                attributes: {
                    'href': '#'
                }
            }, current);

            $('<a>' + btnProperties.label + '</a>')
                .attr(btnProperties.attributes)
                .addClass(btnProperties.cssClass)
                .data('callback', btnProperties.callback)
                .appendTo(footer);
        });
    }

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

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