JSFiddle - React, Tailwind, and code Playground

by Ross Dederer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div ng-controller="AppCtrl" class="full" layout="column" layout-margin>
    <p class="inset">Open a dialog over the app's content. Press escape or click outside to close the dialog.</p>
    <div layout="column" layout-align="center">
        <md-button class="md-primary" ng-click="showAlert($event)">Alert Dialog</md-button>
        <div class="gap"></div>
        <md-button class="md-primary" ng-click="showConfirm($event)">Confirm Dialog</md-button>
        <div class="gap"></div>
        <md-button class="md-primary" ng-click="showAdvanced($event)">Custom Dialog</md-button>
    </div>
    <br/> <b layout="row" layout-align="center center" layout-margin>
    {{alert}}
  </b>

</div>

CSS

.dialogdemoBasicUsage .full {
    width: 100%;
    height: 100%;
}
.dialogdemoBasicUsage .gap {
    width: 50px;
}
.dialogdemoBasicUsage .md-subheader {
    background-color: #dcedc8;
    margin: 0px;
}
.dialogdemoBasicUsage h2.md-subheader {
    margin: 0px;
    margin-left: -24px;
    margin-right: -24px;
    margin-top: -24px;
}
.dialogdemoBasicUsage h2.md-subheader.md-sticky-clone {
    margin-right: 0px;
    margin-top: 0px;
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16);
}
.dialogdemoBasicUsage h2 .md-subheader-content {
    padding-left: 10px;
}

JavaScript

angular.module('dialogDemo1', ['ngMaterial'])
    .controller('AppCtrl', function ($scope, $mdDialog) {
    $scope.alert = '';
    $scope.showAlert = function (ev) {
        $mdDialog.show(
        $mdDialog.alert()
            .title('This is an alert title')
            .content('You can specify some description text in here.')
            .ariaLabel('Password notification')
            .ok('Got it!')
            .targetEvent(ev));
    };
    $scope.showConfirm = function (ev) {
        var confirm = $mdDialog.confirm()
            .title('Would you like to delete your debt?')
            .content('All of the banks have agreed to forgive you your debts.')
            .ariaLabel('Lucky day')
            .ok('Please do it!')
            .cancel('Sounds like a scam')
            .targetEvent(ev);
        $mdDialog.show(confirm).then(function () {
            $scope.alert = 'You decided to get rid of your debt.';
        }, function () {
            $scope.alert = 'You decided to keep your debt.';
        });
    };
    $scope.showAdvanced = function (ev) {
        $mdDialog.show({
            controller: DialogController,
            templateUrl: 'dialog1.tmpl.html',
            targetEvent: ev,
        })
            .then(function (answer) {
            $scope.alert = 'You said the information was "' + answer + '".';
        }, function () {
            $scope.alert = 'You cancelled the dialog.';
        });
    };
});

function DialogController($scope, $mdDialog) {
    $scope.hide = function () {
        $mdDialog.hide();
    };
    $scope.cancel = function () {
        $mdDialog.cancel();
    };
    $scope.answer = function (answer) {
        $mdDialog.hide(answer);
    };
}