JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-app="myModalApp">
  <div ng-controller="ModalController">
    <button class="btn btn-primary" ng-click="showModal1 = true">Show Modal</button>
    <modal visible="showModal1">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Header 1</h4></div>
      <div class="modal-body">
        <h3>This is modal body</h3>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-click="hide(1)">Save</button>
      </div>
    </modal>
  </div>
</div>

JavaScript

var myModalApp = angular.module('myModalApp', []);

myModalApp.directive('modal', function() {
  return {
    template: '<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content" ng-transclude><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div></div></div></div>',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      visible: '='
    },
    link: function postLink(scope, element, attrs) {

      $(element).modal({
        show: false,
        keyboard: attrs.keyboard,
        backdrop: attrs.backdrop
      });

      scope.$watch(function() {
          return scope.visible;
        },function(value) {
          if (value == true) {
            $(element).modal('show');
          } else {
            $(element).modal('hide');
          }
        });

      $(element).on('shown.bs.modal', function() {
        scope.$apply(function() {
          // load progress bar 
          // call process error function
        });
      });
      
      

      $(element).on('hidden.bs.modal', function() {
        scope.$apply(function() {
          // hide 
          scope.visible = false;
        });
      });
    }
  };
});

function ModalController($scope) {
  $scope.showModal1 = false;
  $scope.hide = function(m) {
    if (m === 1) {
      $scope.showModal1 = false;
    }
  }
}