JSFiddle - React, Tailwind, and code Playground

by Shobhit Sharma

HTML

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/angular-resource-1.0.1.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-modal.js"></script>
<div ng-app="popup">
    <div ng-controller="PopupCtrl">
        <h1>Angular and Boostrap Modal Popups</h1>
        <ng-alert title="My Alert" text="Something happened" button-text="Okay" alert-function="okay()">
            <a>Example Alert</a>
        </ng-alert>
        <br />
        <ng-confirm title="My Confirm Box" action-text="Do you want to do this?" action-button-text="Yes Sir" action-function="doIt()" cancel-button-text="No Way" cancel-function="cancel()">
            <a>Example Confirm</a>
        </ng-confirm>
        <br />
        <a ng-popup="/echo/html/">Example Load</a>
        <br />
        Thank you Garry Newman for you example: https://groups.google.com/forum/#!topic/angular/rUttYjuRo2g%5B1-25%5D <br /><br />
        <b>Finally:</b> If you improve this be sure to add you improvements to the wiki: https://github.com/angular/angular.js/wiki/JsFiddle-Examples
    </div>
</div>

JavaScript

function PopupCtrl($scope, PopupService)
{
    $scope.cancel = function () {
        PopupService.close();
    };
    
    $scope.doIt = function () {
        alert("you did it");
        PopupService.close();
    };
    
    $scope.okay = function () {
        alert("you clicked okay");
        PopupService.close();
    };
}


var directivesModule = angular.module('popup.directives', []);
directivesModule.directive('ngPopup', function(PopupService){
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var ngPopupUrl= attrs['ngPopupUrl'];
            // Could have custom or boostrap modal options here
            var popupOptions = {};
            element.bind( "click", function()
            {
                PopupService.load(ngPopupUrl, scope, popupOptions);
            });
        }
    };
});

directivesModule.directive('ngConfirm', function(PopupService) {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
            // Could have custom or boostrap modal options here
            var popupOptions = {};
            element.bind("click", function()
            {
                PopupService.confirm(attrs["title"], attrs["actionText"], 
                        attrs["actionButtonText"], attrs["actionFunction"], 
                        attrs["cancelButtonText"], attrs["cancelFunction"], 
                        scope, popupOptions);
            });
        }
    };
    
});

directivesModule.directive('ngAlert', function(PopupService) {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
            // Could have custom or boostrap modal options here
            var popupOptions = {};
            element.bind("click", function()
            {
                PopupService.alert(attrs["title"], attrs["text"], 
                        attrs["buttonText"], attrs["alertFunction"], 
                        scope, popupOptions);
    ...