Модальное окно для DLE по центру экрана

Модальное окно по центру экрана с затемнением на чистом css.

Это сырая заготовка без оформления самого окна.

===

Модальное окно на чистом JS

===

Отступ сверху екрана указывается в процентах или пикселях в класе - ".dm-cell"

Код окна:

<div class="dm-overlay" id="win1"><div class="dm-table"> 
	<div class="dm-tilo">  
		<a href="#close" class="close">Закрыть</a>
		<p>Текстовое содержание....</p> 
	</div> 
</div></div>

Ссылка для вызова окна:

<a href="#win1">Открыть окно 1</a>

* можно сделать несколько окон с разными айди - #win1 и #win2

Стили отвечающие за окно и затимнение фона:

/* Модальное окно */
.dm-overlay {position: absolute; top: 0;left: 0;display: none;overflow: auto; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65);z-index:999;}
.dm-overlay:target {display: block;}
.dm-table {display: table; width: 100%; height: 100%;}
.dm-tilo {width:50%;height:400px; background: rgba( 255, 255, 255, 0.7); position:fixed;left:50%;top:20%;margin-left:-25%; padding:15px;}

* В медиазапросах когда ваш шаблон стает на весь екран для класа .dm-cell  нужно присвоить -

.dm-table .dm-tilo {width:90%;height:450px;left:5%;top:6%;margin:0;}

----

Сюда, например, можно вставить Ватсапчат - смотреть

Модальное окно №2.

Загрузить готовое решение:

Скачать файл modal-okno.rar ^{[255.41 Kb] (cкачиваний: 37)}