Wijmo 5 - Simple Popups

by Farhat Ullah

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
 <button id="btnLogin" class="btn btn-primary" ng-click="comparisonGroupClicked()">
    Log In
  </button>
 <!-- Log In form -->
  <form id="frmLogin">
    <h4 class="modal-header">
            Log in
            <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
        </h4>
    <div class="modal-body">
      <label>
        Email:
        <input class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Password:
        <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Remember Me
        <input type="checkbox" />
      </label>
      <br />
      <a href="" class="wj-hide-create">Don't have an account yet?</a>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Log in
      </button>
      <button class="btn btn-primary" ng-click="clos()">
      close 
      </button>
    </div>
  </form>
</div>

CSS

.modal-body {
  min-width: 300px;
}

input:invalid {
  border-color: red;
}

body {
  margin-bottom: 24pt;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {

var frmIndustryComparision = new wijmo.input.Popup('#frmLogin');
    frmIndustryComparision.hideTrigger = 'None';
    frmIndustryComparision.class = '';
    
//$scope.clos=function(){alert('far')}   //= { Cancel: function () { alert(‘test’); } };

  $scope.comparisonGroupClicked = function () {
//alert('far');

            frmIndustryComparision.show(true, function (sender) {
                //switch (sender.dialogResult) {
                //case 'submit':
                //    alert('form submitted');
                //    break;
                //    //case 'wj-hide-create':
                //    // btnCreateAccount.click(); // open the Create Account form
                //    // break;
                //}
            });
            }
$scope.clos=function(){
//some operation and then want to close the form
}            
});