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

var $trigger = $("#trigger"),
    api;

$trigger.overlay({
    alert(1);
    fixed: true,
    mask: {
        color: "#000",
        opacity: .8
    },
    onBeforeLoad: function() {
        console.log("onBeforeLoad");
        api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
        //api.close(); // Temporarily "close" the overlay?
        setTimeout(function() { // This will be replaced by the image load event 
            console.log("Waiting is over!");
            //api.load(); // Load the overlay now?
        }, 500);
    },
    onLoad: function() {
        console.log("onLoad");
    }
});