Дизайнерское модальное окно



Посмотреть в действии

<body style="background:#8182A0;">
	<input type='button' value='Click me' id='btn-win' onClick='btn()' >

	
<div class='win-popup' id='popup' style='display: none;'>
		<label class='btn' for='win-popup'></label>
		<input type='checkbox' style='display: none;' checked>
		
<div class='popup-content'>
			
<div class='popup-header'>
				
<h2>pop-up window</h2>

				<label class='btn-close' title='close' for='win-popup' onClick='location.replace("https://adminkov.bcr.by/wp-content/uploads/2018/11/window.html");'></label>
			</div>

			
<form id='popup_save' method='POST'>
				
<div class='popup-body'>
					<textarea name='content'>Hell Word</textarea>
				</div>

				
<div class='popup-footer'>
					<input type='submit' value='Save' id='submit' class='button-primary' name='window' >
					<label style='margin: 0;padding: 0;'><?php echo ( 'comment' ); ?> </label> 
				</div>

			</form>

		</div>

	</div>

</body>
/* кнопка закрытия окна */
.win-popup .btn-close {
	position: absolute;
	top: 20px;
	right: 10px;padding: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	background-color: rgba(61, 61, 61, 0.8);
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	line-height: 20px;
	-webkit-transition: all ease .8s;
	-moz-transition: all ease .8s;
	-ms-transition: all ease .8s;
	-o-transition: all ease .8s;
	transition: all ease .8s;
}
.win-popup .btn-close:hover {
	background-color: rgba(252, 20, 0, 0.8);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
/* само окно */
.win-popup .btn-close:before {
	color: rgba(255, 255, 255, 0.9);
	content: "X";
	text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
	font-size: 14px;
}
.popup-header {
	padding: 20px 20px 10px 10px;
}
/* шапка окна */
.popup-header h2 {
	color: #008000;
	background-color: #D4D0C8;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0,0,0,.3);
	font:22px Arial, Helvetica, sans-serif;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
}

.win-popup{
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
}
.win-popup .popup-content{
	width: 680px;
	height: 400px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.popup-content{
	position: relative;
	margin: 0 0 20px 0;
	float:left;
	width: 100%;
	height:120px;
	top: 10px;
	border-radius: 10px;
	background: #a5a39d;
	box-shadow:
	inset 0 3px 8px 1px rgba(0,0,0,0.2),
	0 1px 0 rgba(255,255,255,0.5);
}
.popup-content:after{
	content: "";
	position: absolute;
	z-index: -1;
	top: -8px; right: -8px; bottom: -8px; left: -8px;
	border-radius: inherit;
	background: #ccc;
	background: linear-gradient(#f2f2f2, #ababab);
	box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25);
}
.popup-body{
	width: 670px;
	overflow-x: auto;
	padding:0;
	margin:0;
}
/* тело окна */
.popup-body textarea{
	position: relative;
	text-align: left;
	padding: 10px 10px;
	width: 94%;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	color: black;
	margin: 0 8px;
	height:265px;
	border: 1px solid #5A5750;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
}
/* подвал окна */
.popup-footer{
	position: relative;
	text-align: left;
	padding: 0;
	margin:10px;
}

Leave a comment

Your email address will not be published. Required fields are marked *