jquery Создание модального всплывающего окна с затемнением фона -- простой пример пример JS, CSS и HTML

Цель -- возможность вещать на разные ссылки появление разных модельных окон. В примере ниже мы повесим, такой обработчик только на одну.

HTML

<ul>
	<li><a id="people-list" href="#">Посмотреть</a></li>
	<li><a href="#">Добавить</a></li>
	<li><a href="#">Загрузить списки</a></li>
	<li><a href="#">Скачать списки </a></li>
</ul>

<div id="people-list" class="modal">
	<!-- Modal content -->
	<div class="modal-content">
	  <span class="close">×</span>
	  <p>Список участников</p>
	</div>
</div>

JS (JQuery)

(также убедитесь что на вашей страницы подключен JQuery до файла с кодом ниже)

/*После загрузки jquery*/
$(function() {
    init();
});

function init() {

     initShowModals();
     initHideModals();
     return false;
 }  

 function initShowModals()
 {  
     
     /**
      * При клике по блоку с этим id
      * показываем модальное окно, 
      * таких ссылок/кнопок для разных 
      * модальных окон может быть сколько угодно.
      */
     $('#show-affected-people-list').on('click', function() {

         var $upBlock = $("#affected-people-list");
         $upBlock.show('slow');
         console.log('show list');
    
        return false;
     });
	 
	 // по аналогии далее можно привязать показ блоков и с другим id
 }
 
 
 /**
  * Отдельно прикручиваем обработку 
  * сокрытия окон
  * 
  * @returns {undefined}
  */
 function initHideModals()
 {  
     /**
     * Клик по области затемнения (непосредственно
     * -- т.е. сбоку от модального окна)
     * или по элементу "закрыть" внутри модального окна
     */
     $('.modal, .close ').on('click', function() {
         $('.modal').hide('slow');    
        return false;
     });
     
     /* Перехватываем клик, чтобы можно было кликать
      * по модальному окну и оно бы при этом не скрывалось*/
     $('.modal-content').on('click', function() {
        return false;
     });
}

CSS

Обратите внимание на величину z-index родительского блока, возможно её придётся варьировать для вашей HMTL страницы:

/* Фоновое затемнение */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Показывать поверх (может быть придётся увеличить это число для вашей страницы) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Само модальное окно (над затемнением) */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position: relative;
}

/* Кнопка "закрыть (крестик)" */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} 

Источник: https://www.w3schools.com/howto/howto_cs...