Тег input как кнопка открытия мод. окна

by Andrey Dobrovoi

HTML

<input type="button" data-width="#?w=400" rel="popup_name" class="poplight" value="Окно в действии - Ширина = 400px">
<br>
<input type="button" data-width="#?w=500" rel="popup1" class="poplight" value="Окно в действии - Ширина = 500px">

<div id="popup_name" class="popup_block">
    <h2>Модальное окно - 400px</h2>
<img src="http://lorempixel.com/100/100/sports" style="float: right; margin: 5px 0 5px 10px;" />
    <p>Вы смотрите один из примеров создания модального окна с помощью CSS и jQuery. В данном примере показано окно шириной 400px. Для вывода других окон просто присваиваете имя новому окну, прописываете в атрибуте <strong>rel</strong>, типа <strong>popup1,2,3</strong> и т.д, и конечно не забываем про идентификатор id, соответственно выставляем такой же. Устанавливаете ширину окна в атрибуте <strong>data-width</strong> тега <strong>input</strong> и c чуством непомерной гордости за себя, любуетесь результатом.</p>
    <p style="text-align: right;"><a href="http://dbmast.ru">/shurawi/</a></p>
</div>
<div id="popup1" class="popup_block">
    <h2>Модальное окно - 500px</h2>
<img src="http://lorempixel.com/100/100/people" style="float: right; margin: 5px 0 0 10px;" />
    <p>Вы смотрите один из примеров создания модального окна с помощью CSS и jQuery. В данном примере показано окно шириной 500px. Для вывода других окон просто присваиваете имя новому окну, прописываете в атрибуте rel, типа popup1,2,3 и т.д, и конечно не забываем про идентификатор id, соответственно выставляем такой же. Устанавливаете ширину окна в атрибуте data-width тега input и c чуством непомерной гордости за себя, любуетесь результатом.</p>
    <p style="text-align: right;"><a href="http://dbmast.ru">/shurawi/</a></p>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
* {
    box-sizing: border-box;
}
html{
  width: 100%; height: 100%;
}
body {
  min-height: 100vh;
  color: #333333;
  background-color: #D4DBE2;
  font-family: "Open Sans", sans-serif;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
.poplight {
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
  color: white;
  padding: 12px 16px;
  background-color: #388e3c;
  border: none;
  outline: none;
  font-size: 16px;
  margin: 10px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.poplight:hover {
  background-color: #43a047;
}
.poplight:active {
  background-color: #2e7d32;
}
/* фон затемнения */
#fade { 
	display: none;/*--по умолчанию скрыто--*/ 
	background: rgba(7, 87, 207, 0.8);
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80; 
	z-index: 9999;
}
/* блок модального окна */
.popup_block {
	display: none; /*--по умолчанию скрыто--*/
	background: #fff;
	padding: 20px;
	border: 8px solid rgb(134, 134, 134);
	font-size: 85%;
	position: fixed;
	top: 50%; 
  left: 50%;
  color: #000;
	max-width: 750px;
	min-width: 320px;
	height: auto;
	z-index: 99999;
	/*--CSS3 тень блока--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 скругление углов--*/
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
/* параграф */
.popup_block p  {	
  font-weight: 400;
	padding: 0;
	margin: 0;
	color: #000;
	line-height: 1.6;}
/* заголовок */
.popup_block h2{
  margin: 0px 0 10px;
  color: rgb(43, 43, 43);
	font-weight: 400;
	text-align: center;
	text-shadow: 1px 1px 2px #0D0C0C;
}	
/* формируем кнопку закрытия */
.close {
    background-color: rgba(61, 61, 61, 0.8);
    border: 2px solid #ccc;
   ...

JavaScript

$(document).ready(function(){
	//При нажатии на кнопку с классом poplight и атрибутом data-width тега <input> с #
	$('input.poplight[data-width*=\\#]').click(function() {
		var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать при добавлении новых менять имя в атрибуте rel ссылки
		var popURL = $(this).attr('data-width'); //получаем размер из data-width атрибута кнопки
				
		//запрос и переменные из href url
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //первое значение строки запроса
 
		//Добавляем к окну кнопку закрытия
		$('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>');
		
        //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Устанавливаем величину отступа
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Добавляем полупрозрачный фон затемнения
		$('body').append('<div id="fade"></div>'); //div контейнер будет прописан перед тегом </body>.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
		
		return false;
	});
	
	//Закрываем окно и фон затемнения
	$(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //плавно исчезают 
    });   
    return false;    
   });
    
});