JSFiddle - React, Tailwind, and code Playground

by shruti patil

HTML

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">


  <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">

    <a id="anchor" ng-href ng-click="showTabDialog($event)">Volume Growth (MoM) </a>


  </div>




  <script type="text/ng-template" id="tabDialog.tmpl.html">
    <md-dialog aria-label="Mango (Fruit)">
      <form>
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Trend chart 2017-2018</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>
        <md-dialog-content style="max-width:800px;max-height:810px; ">
          <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="one">
              <md-content class="md-padding">
                <h1 class="md-display-2">Tab One</h1>


              </md-content>
            </md-tab>
            <md-tab label="two">
              <md-content class="md-padding">

              </md-content>
            </md-tab>
            <md-tab label="three">
              <md-content class="md-padding">
              </md-content>
            </md-tab>
          </md-tabs>
        </md-dialog-content>

        <md-dialog-actions layout="row">

          <span flex></span>

        </md-dialog-actions>
      </form>
    </md-dialog>
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</div>

CSS

.dialogdemoBasicUsage #popupContainer {
  position: relative; }

.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px; }

.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px; }

.dialogdemoBasicUsage button {
  width: 200px; }

.dialogdemoBasicUsage div#status {
  color: #c60008; }

JavaScript

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.status = '  ';
  $scope.customFullscreen = true;


  $scope.showTabDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'tabDialog.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true
    })
        .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = '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);
    };
  }
});