Hash Tag Popup for WordPress

app.js

(function ($) {
  "use strict";

  /**
  Creates an instance of Lightbox.

  @constructor
  @this {Lightbox}
  @param {object} $container The container.
  @param {object} opts Options.
   */
  var Lightbox;

  Lightbox = function($container, opts) {
    var _this;
    if ($container === "undefined" || !$($container.length)) {
      return;
    }
    if (!this instanceof Lightbox) {
      return new Lightbox($container, opts);
    }
    _this = this;
    opts = opts || {};
    _this.$container = $($container);
    _this.cfg = opts = {
      onOpen: (typeof opts.onOpen === "function" ? opts.onOpen : function() {}),
      onClose: (typeof opts.onClose === "function" ? opts.onClose : function() {}),
      centered: (typeof opts.centered === "boolean" ? opts.centered : true)
    };
    _this.$body = $('body');
    _this.$window = $(window);
    _this.init();
  };

  Lightbox.prototype = {
    init: function() {
      var _this;
      _this = this;
      _this.$body.on("click", function() {
        if (!$('#ytplayer').is(':visible')) { 
            $('#home-video-wrap').append('<iframe id="ytplayer" width="66%" height="440" src="//www.youtube.com/embed/E-BQXc4E8T8?rel=0&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
        }
        _this.close({
        });
      });
      _this.$container.find('.close').on("click", function() {
        _this.close();
        $('#home-video-wrap').append('<iframe id="ytplayer" width="66%" height="440" src="//www.youtube.com/embed/E-BQXc4E8T8?rel=0&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
      });
      _this.$container.on("click", function(ev) {
        ev.stopPropagation();
      });
      $(document).on("keyup", function(ev) {
        if (ev.keyCode === 27) {
          return _this.close();
        }
      });
    },
    open: function() {
      var _this;
      _this = this;
      _this.$container.addClass('active');
      _this.$body.addClass('lightbox-active');
      _this.cfg.onOpen();
      /*
      if (_this.cfg.centered) {
        _this.$container.center();
        _this.$window.on('load resize', function() {
          return _this.$container.center({ top: 30 });
        });
      }
      */
    },
    close: function() {
      var _this;
      _this = this;
      _this.$body.removeClass('lightbox-active');
      _this.$container.removeClass('active');
      _this.cfg.onClose();
    }
  };

  $(document).ready(function () {
    var hash = window.location.hash;

    $('.modal').each(function () { 
      var $this = $(this),
        lbHash = $this.attr('data-hash'),
        lb = new Lightbox($this);

      if (hash === lbHash) {
        $('#ytplayer').remove();
        $('#popup-box-pro-gfcr-4').remove();
        $('popupally-configuration').remove();
        lb.open(); 
        
      }
      
    });
  });

}(jQuery));

hash-tag-popup-wordpress.php

<?php

add_action( 'wp_enqueue_scripts', 'hjs_enqueue_custom_scripts_styles', 999 );
function hjs_enqueue_custom_scripts_styles() {

  wp_register_script('app', get_bloginfo('stylesheet_directory') . '/js/app.js', array('jquery'), '1.0.0', true);
  wp_register_style('modal', get_bloginfo('stylesheet_directory') . '/styles/modal.css');
  wp_enqueue_style( 'modal' );
  wp_enqueue_script( 'app' );

}

// Add the Modal somewhere (I'm using Genesis)
add_action('genesis_before','hjs_before');
function hjs_before() { ?>

  <div id="modal-overlay">
    <div class="modal active" data-hash="#applyforscholarship">
      <i class="fa fa-times close"></i>
      <div id="applyforscholarship" class="content">
        <h2>A Title</h2>
        <div class="main clear">
          <h3> A Subtitle </h3>
          <p>Some Content Here</p>
        </div>
      </div>
    </div>
  </div>

<?php }

modal.css

.modal {background: #fff;box-shadow: 0 0 100px rgba(0, 0, 0, .75);left: 0;margin: 30px auto;opacity: 0;position: relative;top: 0;transition: opacity .1s ease-in;width: 80%;z-index: -1;}
.modal.active { overflow: hidden; opacity: 1;z-index: 9999;}
.modal .fa-times {cursor: pointer;right: 10px;font-size: 22px;position: absolute;top: 5px; z-index: 10000; }
.modal .main {margin: 0 0 20px;}
.modal h3 {color: #000;}
.modal .content {padding: 25px 30px 30px;}
#modal-overlay {background: rgba(0, 0, 0, .5);bottom: 0;display: none;min-height: 100%;left: 0;overflow-x: auto;overflow-y: scroll;position: fixed;right: 0;top: 0;width: 100%;z-index: 9998;}
.vendor-ie-8 #modal-overlay { background: #000;}
.lightbox-active #modal-overlay {display: block;}
.clear:before,
.clear:after {content: " ";display: table;} 
.clear:after {clear: both;}
.clear {*zoom: 1;}