JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="ouibounce-modal" style="display:none;">
  <div class="underlay"></div>
  <div class="modal">
    <div class="modal-title">
      <h3>THANK YOU for stopping by!</h3>
    </div>

    <div class="modal-body">
        <p>
        Would you be willing to take a brief<br/>
        <a href="https://www.surveymonkey.com/r/xxxxxxx" target="_blank"><img src="images/Survey.withText.png"/></a><br/>
        to let us know what's working<br/>
        and not working<br/>
        </p>
        <br/><br/>
        <p>
        </p>
   </div>

    <!-- <button type="button" id="close" onclick="return closewindow();">no thanks</button> -->

    <div class="modal-footer" style="font-size: 1.7em; text-align: center;"><a href="#" onclick="$('#ouibounce-modal').hide();">no thanks</a></div>       

    <!-- <div class="modal-footer" style="font-size: 1.7em; text-align: center;"><a href="index.html">no thanks</a></div> -->

  </div>
</div>

JavaScript

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require,exports,module);
  } else {
    root.ouibounce = factory();
  }
}(this, function(require,exports,module) {

return function ouibounce(el, custom_config) {
  "use strict";

  var config     = custom_config || {},
    aggressive   = config.aggressive || false,
    sensitivity  = setDefault(config.sensitivity, 20),
    timer        = setDefault(config.timer, 1000),
    delay        = setDefault(config.delay, 0),
    callback     = config.callback || function() {},
    cookieExpire = setDefaultCookieExpire(config.cookieExpire) || '',
    cookieDomain = config.cookieDomain ? ';domain=' + config.cookieDomain : '',
    cookieName   = config.cookieName ? config.cookieName : 'viewedOuibounceModal',
    sitewide     = config.sitewide === true ? ';path=/' : '',
    _delayTimer  = null,
    _html        = document.documentElement;

  function setDefault(_property, _default) {
    return typeof _property === 'undefined' ? _default : _property;
  }

  function setDefaultCookieExpire(days) {
    // transform days to milliseconds
    var ms = days*24*60*60*1000;

    var date = new Date();
    date.setTime(date.getTime() + ms);

    return "; expires=" + date.toUTCString();
  }

  setTimeout(attachOuiBounce, timer);
  function attachOuiBounce() {
    if (isDisabled()) { return; }

    _html.addEventListener('mouseleave', handleMouseleave);
    _html.addEventListener('mouseenter', handleMouseenter);
    _html.addEventListener('keydown', handleKeydown);
  }

  function handleMouseleave(e) {
    if (e.clientY > sensitivity) { return; }

    _delayTimer = setTimeout(fire, delay);
  }

  function handleMouseenter() {
    if (_delayTimer) {
      clearTimeout(_delayTimer);
      _delayTimer = null;
    }
  }

  var disableKeydown = false;
  function handleKeydown(e) {
    if (disableKeydown) { return; }
   ...