Angular Modal Demo

Sumi

by JQ Purfect

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div ng-controller="mainController">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">Send Notification <span class="pull-right" ng-click="cancel()">&times;</span></h3>
    </div>
    <div class="modal-body">
      <div class="row notifyDetails">
        <div class="col-md-5">
          <div class="leftSection">
            <h3>LM200-6A</h3>
            <ul>
              <li><span>DATE</span> xxxxxxx</li>
              <li><span>SITE</span> xxxxxxx</li>
              <li><span>UNIT#</span> xxxxxxx</li>
            </ul>
          </div>
          <div class="clear"></div>
          <div class="well">Sending this notification will Publish the inspection automatially.</div>
        </div>
        <div class="col-md-7">
          <div class="rightSection">
            <h3>Notify one or more people of this item</h3>
            <form>
              <div class="form-group">
                <label for="email">Email Addresses</label>
                <input type="email" class="form-control" id="email" placeholder="Email(s)">
              </div>
              <div class="form-group">
                <label for="comments">Comments (optional)</label>
                <textarea class="form-control" id="comments" placeholder="Comments"></textarea>
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
    <div class="modal-footer">
      <button class="btn btn-default pull-left" type="button" ng-click="cancel()">Cancel</button>

      <button class="btn btn-main" type="button" ng-click="cancel()"><i class="fa fa-envelope-o"></i>...

CSS

.clear {
  height: 2px;
}

.col-md-5 {
  border-right: dotted 2px #ddd;
}

.notifyDetails .leftSection {
  background: #eee;
  padding: 2px 2px 15px 15px;
}

.notifyDetails .leftSection h3 {
  padding-bottom: 15px;
}

.notifyDetails .leftSection ul {
  list-style-type: none;
  padding-left: 0px;
}

.notifyDetails .leftSection ul li span {
  color: #bababa;
  font-weight: bold;
  float: left;
  width: 60px;
}

.well {
  background: #ff9823;
  color: #fff;
}

.notifyDetails .rightSection h3 {
  padding-bottom: 15px;
}

.notifyDetails .rightSection textarea {
  height: 100px;
  resize: none;
}

JavaScript

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

app.controller('mainController', function($scope, $modal, $log) {

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

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

  $scope.toggleAnimation = function() {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {

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