Demo - Popups

by Joel Parks

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>
    Popups
  </h1>
  <p>
    The Popup control shows arbitrary HTML content next to an
    "owner" element or centered on the screen. It can be used
    to implement drop-downs and dialogs.</p>
  <p>
    For example, click the buttons below to see a drop-down
    or a dialog:</p>

  <button id="btnDropDown" class="btn btn-primary">
    Show Drop-Down
  </button>
  <div id="dropDown" class="wj-dialog-body">
    <p>This is a drop-down.</p>
    <p>It may contain other controls.</p>
    <button class="btn btn-default wj-hide">OK</button>
  </div>

  <button id="btnDialog" class="btn btn-primary">
    Show Dialog
  </button>
  <div id="dialog">
    <div class="wj-dialog-header">
      Dialog Header
    </div>
    <div class="wj-dialog-body">
      <p>
        This is a modal dialog.</p>
      <p>
        The dialog body may contain any HTML content.</p>
      <p>
        The dialog will close when you click the OK or Cancel buttons,
        <br/> or the grey background outside the dialog,
        <br/> or when you press the Escape key.</p>
    </div>
    <div class="wj-dialog-footer">
      <button class="btn btn-default wj-hide-ok">OK</button>
      <button class="btn btn-default wj-hide-cancel">Cancel</button>
    </div>
  </div>
	<div id="dialogTest">
    <div class="wj-dialog-header">
      Dialog Header
    </div>
    <div class="wj-dialog-body">
      <p>
        This is not a modal dialog.</p>
      <p>
        The dialog body may contain any HTML content.</p>
      <p>
        The dialog will close when you click the OK or Cancel buttons,
        <br/> or the grey background outside the dialog,
...

CSS

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create dropdown and show it when the user clicks the button
  // note that no event handler is needed here: setting the
  // Popup's owner is enough
  var dropDown = new wijmo.input.Popup('#dropDown', {
    owner: document.getElementById('btnDropDown')
  });

  // create dialog and show it when the user clicks the button
  // here there's no owner element, so we do need an event handler
  var dialog = new wijmo.input.Popup('#dialog');
	dialog.show(true);
	var dialogTest = new wijmo.input.Popup('#dialogTest');
	dialogTest.show(true);
	var dialogTest1 = new wijmo.input.Popup('#dialogTest1');
	dialogTest1.show(true);
  document.getElementById('btnDialog').addEventListener('click', function(e) {

    // show the dialog (modal window)
    dialog.show(true, function(sender) {

      // handle result when user closes the dialog
      if (dialog.dialogResult == 'wj-hide-ok') {
        alert('The dialog was submitted.');
      } else {
        alert('The dialog was canceled.');
      }
    });
  });
}