JSFiddle - React, Tailwind, and code Playground

by johnoscott

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0rc7/angular-1.0.0rc7.js"></script>
<div class="modal" ui-show="modal.show">
    <div>
        <h3>
            {{modal.title}}
            <a ng-click="modal.cancel()">Cancel</a>
        </h3>
        <p ng-bind-html-unsafe="modal.body"></p>
        <p ng-show="modal.buttons" class="submit">
            <a ng-repeat="attrs in modal.buttons" ng-href="{{attrs.href}}" ng-class="attrs.class" ng-click="attrs.click()" ng-bind="attrs.label" title="{{attrs.title}}"></a>
        </p>
        <p ng-hide="modal.buttons" class="submit">
            <a ng-show="is('String', modal.ok)" ng-href="modal.ok">{CONTINUE}</a>
            <a ng-hide="is('String', modal.ok)" ng-class="!modal.ok&&'disabled'" ng-click="modal.ok()">{CONTINUE}</a>
            <a class="cancel" ng-click="modal.cancel()">{CANCEL}</a>
        </p>
        
    </div>
</div>

SCSS

/*** BUTTONS ***/
.btn {
    @include border-radius(3px);
    @include text-shadow(0 -1px 0 rgba(0,0,0, .2));
    @include box-shadow(0 1px 1px -1px rgba(0,0,0, .3));
    @include opacity(.9);
    @include gradient;
    font-family: $roman;
    color: white;
    border: none;
    font-size: 13px;
    cursor: pointer;
    padding: 12px 13px;
    display: inline-block;
    margin-right: 10px;
    &:hover {
        @include opacity(1);
    }
    &:active{
        @include opacity(.6);
    }
    &.right {
        margin-right: 0;
        margin-left: 10px;
    }
}
.btn-cancel, .cancel {
    @extend .btn;
    @include gradient-cancel;
    &:hover{
        @include box-shadow(0 1px 1px 0 rgba(0, 0, 0, .1));
    }
}

/*** OVERLAYS ***/
.overlay {
    @include transition(height 0 ease);
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    max-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    &.show, &.ui-show {
        @include animation(fadein 0.2s ease);
        max-height: 100%;
        background-color: rgba(0,0,0,.8);
    }
}
.loading {
    @extend .overlay;
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 200;
    background-color: rgba(0,0,0,.5);
    max-height: 100%;
}
.processing {
    display: block;
    text-align: center;
    padding:10px 5px;
}
.modal {
    @extend .overlay;
    > div {
        @include border-radius(0 0 3px 3px);
        @include box-shadow(0 5px 30px 0 rgba(0, 0, 0, 0.4));
        width: 610px;
        padding: 10px 15px;
        margin: -500px auto 0;
        background: #fff;
        h3 {
            @include gradient;
            color: $white;
            font-size: 13px;
            margin: -10px -15px 10px;
            padding: 10px;
            a {
                @include replace-text('new/icons/icon-close.png');
                float: right;
                height: 40px;
                width: 40px;
              ...

JavaScript

/**
     * Modal dialogue helper
     * If an array is stored under the buttons attribute, it will be used instead.
     */    
    $rootScope.modal = {
        show: false, // {boolean}
        title: '',
        body: '',
        ok: angular.noop,
        cancel: angular.noop,
        buttons: false /* or do [ 
            { label: 'Save', href: 'example.com', click: someCallback, class: 'left', title: 'Click to save' },
            { label: 'Exit', href: 'example.com', click: someCallback, class: 'left' }
        ] */
    };