JSFiddle - React, Tailwind, and code Playground

by serebrov

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div ng-app="app">

  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <div>String data: {{ stringData }}</div>
            <div>Object data: {{ objData.name }}</div> 
            <input type="text" ng-model="stringData"></input>
            <input type="text" ng-model="objData.name"></input>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" ng-click="okClose()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>  
        </div>
    </script>

    <div>String data: {{ stringData }}</div>
    <div>Object data: {{ objData.name }}</div>
    <br/>
    <br/>
    <button class="btn btn-default" ng-click="open()">Open me!</button>

  </div>
</div>

CSS

.modal-dialog {
    padding-top: 100px;
}

JavaScript

angular.module('app', ['ui.bootstrap']);

angular.module('app').controller('ModalDemoCtrl', function ($scope, $modal) {

  $scope.stringData = "testString";
  $scope.objData = {name: "testObject"};

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'MyModalInstanceCtrl',
      scope: $scope
    });

  };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('app').controller('MyModalInstanceCtrl', function ($scope, $modalInstance) {

  $scope.okClose = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss();
  };
});