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-fluid">

    @*without submit page event*@
    <button id="btnClickBlur_NoSubmit" type="button" class="btn btn-success">
        No Submit Popover
    </button>

    <div id="popClickBlur_NoSubmit" class="popover">
        <h3 class="popover-title">
            Title
        </h3>
        <div class="popover-content">
            Popup No Submit<br />
            This is a multi-line message! This is a long line in my popover, which uses Bootstrap's
            'popover-content' style.
        </div>
    </div>
</div>

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 input.Popup('#popClickBlur_NoSubmit', {
            owner: document.getElementById('btnClickBlur_NoSubmit'),
            showTrigger: 'Click',
            hideTrigger: 'Blur'
        });
}