JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://7699298.betasimple.net/scripts/jquery.tools.overlay.min.js"></script>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <a id="trigger" href="#" rel="#img1">Click here</a>
    <img class="overlay" id="img1" src="http://farm6.staticflickr.com/5294/5418890502_01bf0babda_z.jpg" width="640" height="427" alt="" />
  </body>
<html>

CSS

.overlay {
    display:none;
    z-index:10000;
}

JavaScript

$(function () {
  var $trigger = $("#trigger");
  $trigger.overlay({
    fixed: true,
    mask: {
      color: "#000",
      opacity: .4
    },
    onBeforeLoad: function () {
      if (typeof this.init === "undefined") {
        this.init = true;
        setTimeout(function () { // This will be replaced by the image load event handler
          console.log("OK, let's show it!");
          $trigger.overlay().load(); // Load the overlay
        }, 5000);
        console.log("Not now!");
        return false;
      }
    }
  });
});