Popups with Owner Elements

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Popups with Owner Elements
  </h1>
  <p>
    Popups may have owner elements that control their position
    and visibility.</p>
  <p>
    The Popup's <b>showTrigger</b> and <b>hideTrigger</b> properties
    determine whether the Popups should be shown or hidden when the 
    owner element is clicked or when the popup loses the focus.</p>
  <p>
    In Bootstrap CSS, Popups with owner elements are called "Popovers".</p>

  <h3>
    Show on Click, Hide on Blur
  </h3>
  <p>
    The most common type of Popover is the one with <b>showTrigger</b>
    set to 'Click' and <b>hideTrigger</b> set to 'Blur'.</p>
  <p>
    In this example, the owner element is a button. Click the button
    to show the Popover. Click anywhere outside the Popover to take
    the focus away and hide it:</p>
  <button id="btnClickBlur" class="btn btn-primary">
    Show the Popover
  </button>
  <div id="popClickBlur" class="popover">
    <h3 class="popover-title">
      Title
    </h3>
    <div class="popover-content">
      Hello Popup<br/>
      This is a multi-line message!
      This is a long line in my popover, which uses Bootstrap's
      'popover-content' style.
    </div>
  </div>

  <h3>
    Show on Click, Hide on Click
  </h3>
  <p>
    If you set the <b>showTrigger</b> and <b>hideTrigger</b>
    to 'Click', the Popover will appear when you click the owner
    element and will remain visible until you click the owner
    element again:</p>
  <button id="btnClickClick" class="btn btn-primary">
    Show the Popover
  </button>
  <div id="popClickClick" class="popover">
    <h3...

CSS

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

input:invalid {
  border-color: red;
}


/* CSS animations for fading in and out */

.custom-animation {
  opacity: 0;
  transform: rotate3d(1, .5, .5, 180deg) scale(0.1);
  transition: all ease-in .4s;
}

.custom-animation-visible {
  opacity: 1;
  transform: none;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the popups
  var popClickBlur = new wijmo.input.Popup('#popClickBlur', {
    owner: document.getElementById('btnClickBlur'),
    showTrigger: 'Click',
    hideTrigger: 'Blur'
  });
  var popClickClick = new wijmo.input.Popup('#popClickClick', {
    owner: document.getElementById('btnClickClick'),
    showTrigger: 'Click',
    hideTrigger: 'Click'
  });
  var popClickNone = new wijmo.input.Popup('#popClickNone', {
    owner: document.getElementById('btnClickNone'),
    showTrigger: 'Click',
    hideTrigger: 'None'
  });
  let popClickBlur_NoSubmit = new wijmo.input.Popup('#popClickBlur_NoSubmit', {
    owner: document.getElementById('btnClickBlur_NoSubmit'),
    showTrigger: 'Click',
    hideTrigger: 'Blur'
  });
}