From: http://www.yiiframework.ru/forum/viewtopic.php?f=15&t=23737

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://rawgit.com/samdark/the-modal/master/the-modal.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://rawgit.com/samdark/the-modal/master/jquery.the-modal.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
  </body>

</html>

// Code goes here

function attachCloseEvents(overlay, localOptions) {
  var $modal = this;
  var $closeBtn = overlay.find('.close');
  var closeMethod = $modal.modal().close;
  var keyupHandler = function (e) {
    if (e.keyCode === 27) closeMethod();
  };
  var clickHandler = function (e) {
    closeMethod();
    $(document).off('keyup', keyupHandler);
  };
  
  $closeBtn.one('click', clickHandler);
  overlay.one('click', clickHandler);
  $(document).one('keyup', keyupHandler);
}

$(function () {
  $.get('modal.html').done(function (modal) {
    var $modal = $(modal);
    var options = {
      onOpen: function (overlay, localOptions) {
        attachCloseEvents.apply($modal, arguments);
        
        /** your code here... */
        console.log('Works!');
      },
      
      onClose: function (overlay, localOptions) {
        console.log('Works too!');
      }
    };
    
    $modal
      .appendTo(document.body)
      .modal(options).open();
      
    $title = $('h1').on('click', function (e) {
      $modal.modal(options).open();
    });
  });
});

/* Styles go here */

.modal {
  position: relative;
  
  margin: 40px auto;
  padding: 30px;
  
  width: 60%;
  min-width: 400px;
  
  background: #fff;
}

.modal .close {
  position: absolute;
  
  top: 0;
  right: 5px;
  
  text-decoration: none;
  color: #999;
  font-size: 28px;
  line-height: 1;
}

.modal .close:hover {
  color: black;
}

<div class="modal" id="terms-of-service" style="display: none">
  <a href="#" class="close">×</a>

  Terms of service here
</div>