modal bootstrap class

based upon the world of csuwldcat

by Shobhit Sharma

HTML

<script src="https://raw.github.com/DimitarChristoff/Modal/master/Source/js/Modal.js"></script>
<nav class="main boxShadow" style="width:800px;">
        <h1>BootStrap modal test field</h1>
        <ul>
            <li><a href="#interview" class="modal-overlay" data-title="long interview, scroll" data-footer="#footerTest" data-any-close="false" data-esc-close="true">Grab element with long text (scroll), footer from another element, can close with ESC, can't close by overlay</a></li>
            <li><a href="#interview2" class="modal-overlay" data-title="headerTest" data-buttons="[{className:'right modal-close','text':'No, thanks','event':'cancel'},{className:'left','text':'Sure!','event':'confirm'}]" data-any-close="true">Grab short data from an element, title from another element, buttons with events, click on overlay closes, ESC won't (default)</a></li>

            <li><a href="ajax.html" class="modal-overlay" data-type="ajax" data-title="Simon was here" data-overlay="false" data-esc-close="true">Grab contents via ajax from href, no overlay, custom title as string, ESC closes</a></li>

            <li><a href="http://farm8.static.flickr.com/7007/6543210773_03ed7af4e2.jpg" class="modal-overlay" data-title="Santa's coming to town and he likes to ski!" data-class="autoWidth" data-buttons="[{className:'right modal-close','text':'Close'}]" data-esc-close="true">Use as a basic lightbox for an image target (needs CSS tweaks for this to be better)</a></li>

        </ul>
        <br />
        Example without a link and with data-body property instead on a button:<br />
        <button class="modal-overlay black transition" data-body="#areas" data-title="Please select your area from the list" data-event-open="areaPickerOpen" data-buttons="[{className:'right modal-close','text':'Nevermind, perhaps later...','event':'cancel'}]">Pick your location from a list</button>
    </nav>
    <div id="lipsum" class="main" style="width: 1000px;">
        <p>
        Lorem ipsum...

CSS

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:focus { outline: thin dotted; }

/*...

JavaScript

// check under resources, references github


new Modal.BootStrap(document.body, {
    onConfirm: function() {
        this.hide();
        alert("you rocked!");
    },
    onCancel: function() {
        this.hide();

    }
});