Cacher is the code snippet organizer for pro developers

#background { 
  left: 0; 
  top: 0; 
  position: absolute; 
  background: #000; 
  opacity: 0.7; 
  z-index: 999; 
  display: none; 
  height: 100%; 
  width: 100%; 
} 
 
#modal_window { 
  display: none; 
  z-index: 9999; 
  border: 1px solid #444; 
  background-color: #FEFEFE; 
  border-radius: 10px; 
  padding: 15px 20px; 
  height: 250px; 
  width: 450px; 
}

<a onclick="open_popup('#modal_window');" href="#">Открыть окно</a> 
<div id="modal_window"> 
  <a onclick="close_popup('#modal_window');" href="#">Закрыть окно</a> 
  <p>Вот такое вот всплывающее окно на JQuery у вас получится.</p> 
</div> 
<div id="background"></div>

/* Открываем модальное окно: */
function open_popup(box) { 
  $("#background").show() 
  $(box).centered_popup(); 
  $(box).delay(100).show(1); 
} 
 
/* Закрываем модальное окно: */
function close_popup(box) { 
  $(box).hide(); 
  $("#background").delay(100).hide(1); 
} 
 
$(document).ready(function() { 
  /* Позиционируем блочный элемент окна по центру страницы: */
  $.fn.centered_popup = function() { 
    this.css('position', 'absolute'); 
    this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px'); 
    this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px'); 
  } 
 
});

1. Подключите библиотеку JQuery к веб-странице.
2. CSS идентификатор  #background задает оформление фона во время появления модального окна, а  #modal_window — внешний вид самого всплывающего элемента. Обратите внимание на значение свойств  z-index и position.
3. При этом HTML разметка у вас должна содержать, как минимум это
По умолчанию и #background, и  #modal_window будут скрыты

(c) http://red-book-cms.ru/poleznosti/javascript/jquery-vsplyivayushhee-okno.html