Código básico para creación de un modal (o lightbox).

modal-js.md

Código básico para creación de un modal (o lightbox)

HTML (PUG)

a#linkTerminos(href="#modalTerminos") Terminos y Condiciones

#modalTerminos.lq-modal
  .lq-modal__header
    Titulo

  .lq-modal__body
    p Contenido

  .lq-modal__footer
    button.lq-btn.lq-btn-close Cerrar

CSS (SASS)

.lq-modal {
  display: none;
}

JavaScript usando jQuery

var $linkTerminos;

var linkTerminos_clickHandler = function (event) {
  event.preventDefault();

  var modal_id = $(event.currentTarget).attr('href');
  modal_open(modal_id);
};

var modalTerminosClose_clickHandler = function (event) {
  event.preventDefault();

  $modalTerminos.find('.lq-btn-close').off('click', modalTerminosClose_clickHandler);

  modal_close( $('.lq-modal:visible').prop('id') );
};

var overlay_clickHandler = modalTerminosClose_clickHandler;

var modal_open = function (modal_id) {
  var $modal = $(modal_id);

  $modal.find('.lq-btn-close').on('click', modalTerminosClose_clickHandler);
  $modal.show();
};

var modal_close = function (modal_id) {
  var $modal = (modal_id ? $(modal_id) : $('.lq-modal'));

  $modal.hide();
};  

var cache = function () {
  $linkTerminos = $('#linkTerminos');
  $modalTerminos = $('#modalTerminos');
};

var bind = function () {
  $('#linkTerminos').on('click', linkTerminos_clickHandler);
}

var main = function () {
  cache();
  bind();
}

main();