Wijmo (PureJS) - Popup with Text that can be Selected

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 with Owner Elements
  </h1>
  <p>
    This button will bring up a popup with a text area inside that will allow the user to copy the text located inside of it.
  </p>
  <button id="btnClickNone" class="btn btn-primary">
    Show the Popover
  </button>
  <div id="popClickNone" class="popover">
    <h3 class="popover-title">
      Example Email Address
    </h3>
    <div class="popover-content">
      <form name="popoverForm">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">@</div>
            <input class="form-control" value="[email protected]">
          </div>
        </div>
        <div class="form-actions">
          <button class="btn btn-danger wj-hide">Close</button>
          <button class="btn btn-primary wj-hide-ok">Save changes</button>
        </div>
      </form>
    </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 popClickNone = new wijmo.input.Popup('#popClickNone', {
    owner: document.getElementById('btnClickNone'),
    showTrigger: 'Click',
    hideTrigger: 'None'
  });
  
  //alert("HELLO");
  
  alert(document.getElementByID('tester').value);
}