JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-view></div>
    
    <!-- hello.html -->
    <script type="text/ng-template" id="hello.html">
      Hello, world!<br />
      <button ng-click="func()">Say Goodbye!</button>
    </script>
    
    
    <!-- goodbye.html -->
    <script type="text/ng-template" id="goodbye.html">
      Goodbye, cruel world!<br />
      <button ng-click="func()">Say Hello!</button>
    </script>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://docs.angularjs.org/angular-1.0.0rc10.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>

JavaScript

function create_modal_service() {
    var modal = {};

    modal.buttons = {
        ok: {
            icon: "ok",
            id: "generic-modal-ok-button",
            type: "primary",
            tag: "ok",
            text: "OK",
            white: true
        },
    };

    modal.show_ok = function(title, body, body_type, callback) {
        modal.show(title, body, body_type, callback, [modal.buttons.ok]);
    };

    modal.show = function(title, body, body_type, callback, buttons) {
        modal.callback = callback;

        // Add the title
        $('#generic-modal-title').html(title);

        // Add the body
        $('#generic-modal-body').empty();
        $('#generic-modal-body').html(body);

        // Add the buttons
        var footer = $('#generic-modal-footer');
        footer.empty();
        for (var x = 0; x < buttons.length; x++) {
            footer.append(modal._create_button(buttons[x]));
        }
        // Show the dialog
        modal._show();
    };

    modal._show = function() {
        $('#generic-modal-backdrop').css('display', 'block');
        $('#generic-modal').show();
    };

    modal._hide = function() {
        $('#generic-modal-backdrop').css('display', 'none');
        $('#generic-modal').hide();
    };

    modal.button = function(tag) {
        console.log(tag);
        modal._hide();

        if (modal.callback != undefined) {
            modal.callback(tag);
        }
    };

    modal._create_button = function(data) {
        var cls = "btn";
        if (data.type != undefined) cls += " btn-" + data.type;

        var tag = data.tag;
        var btn = $('<button></button>', {
            'class': cls
        });
        btn.on('click', function() {
            modal.button(data.tag);
        });

        cls = "icon-" + data.icon;
        if (data.white) cls += " icon-white";

        btn.append($('<i></i>', {
            'class': cls
        }));
        btn.append(data.text);

        return btn;
    };

   ...