Demo - Dialogs

by Farhat Ullah

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/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>
<div class="container">

  <h1>
    Dialogs
  </h1>
  

  <button id="btnLogin" class="btn btn-primary">
    Log In
  </button>

 

  <!-- Log In form -->
  <form id="frmLogin">
    <h4 class="modal-header">
            Header
            <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
        </h4>
    <div class="modal-body">
     Body
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Footer
      </button>
    </div>
  </form>

 
</div>

CSS

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

input:invalid {
  border-color: red;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create forms
  var frmLogin = new wijmo.input.Popup('#frmLogin');
  //var frmCreateAccount = new wijmo.input.Popup('#frmCreateAccount');
  //var frmEditAccount = new wijmo.input.Popup('#frmEditAccount');

  // show forms
  document.getElementById('btnLogin').addEventListener('click', function() {
    frmLogin.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;
      }
    });
  });
 
  // validate the form but don't submit
  document.body.addEventListener('submit', function(e) {
    e.preventDefault(); // don't submit
    if (e.target.checkValidity()) {
      var dlg = wijmo.Control.getControl(e.target);
      dlg.hide('submit'); // close the dialog passing a dialogResult
    }
  });

  // validate password/new password confirmation
  ensureSameValue('password', 'confirm');
  ensureSameValue('newPassword', 'newConfirm');
  function ensureSameValue(f1, f2) {
    var inputs = [document.getElementById(f1), document.getElementById(f2)];
    inputs.forEach(function(input) {
      input.addEventListener('input', function(e) {
        var err = inputs[0].value != inputs[1].value ? 'Passwords don\'t match.' : '';
        inputs[1].setCustomValidity(err);
      });
    })
  }
}