JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//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 class="modal" 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');
    el.on('click', function(e) {
        var target = e.target || e.srcElement;
        var $target = $(target);
        var callback = $target.data('callback');
        var instance = el.data('instance');

        if (typeof callback === 'function' && typeof instance === 'object') {
            callback.call(instance, e);
        }
    });

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

    // constructor
    modalWindow = function(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this.init();
    }

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

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

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

        // set buttons
        var footer = el.find('.modal-footer').empty();
        $.each(options.buttons || [], function(index, current) {

            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);
        });

        // store instance info
        el.data('instance', base);
    }

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

    // public
  ...