JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app='test'>
    <div ng-controller='test2'>
    <button ng-click='selectCustomer = true;'>SELECT/CREATE CUSTOMER</button>
    <button ng-click='hide()'>Hide modal</button>
    <modal-dialog-select show='selectCustomer'></modal-dialog-select>
    </div>
</div>

JavaScript

app = angular.module('test', []);
app.directive('modalDialogSelect', function () {
    return {
        restrict: 'AE',
        scope: {
            show: '='
        },
        replace: true,
        transclude: true,
        link: function (scope, element, attrs) {
            scope.dialogStyle = {};
            scope.hideModal = function () {
                scope.show = false;
            };
        },
        template: "<div class='ng-modal' ng-show='show'>\
  <div class='ng-modal-overlay' ng-click='hideModal()'></div>\
    <div class='ng-modal-dialog' ng-style='dialogStyle'>\
      <p>Select New Customer</p>\
    </div>\
  </div>\
</div>"
    };
});
app.controller('test2', ['$scope', function ($scope) {
    $scope.hide = function () {
        $scope.selectCustomer = false;
    };
}]);