Посмотреть в действии
<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;
}
