Посмотреть в действии
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pop-up window</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$img1 = "https://www.adminkov.bcr.by/wp-content/uploads/2024/02/pop-up/images/screw.png";
$img2 = "https://www.adminkov.bcr.by/wp-content/uploads/2024/02/pop-up/images/screw_l.png";
$img3 = "https://www.adminkov.bcr.by/wp-content/uploads/2024/02/pop-up/images/screw_r.png";
$img4 = "https://www.adminkov.bcr.by/wp-content/uploads/2024/02/pop-up/images/graph.png";
if (isset($_POST["win"])) {
?>
<div class="win-popup">
<label class="btn"></label>
<input type="checkbox" style="display: none;" checked>
<div class="popup-content">
<div class="popup-header">
<h2>Live stun servers</h2>
<img src="<?php echo ( $img1 ); ?>" style="position: absolute;top: 10px;left: 12px;">
<a href="" class="btn-close" title="close"></a>
</div>
<div class="popup-body">
<div style="width: 660px; height: 300px; padding: 5px 0 0 0; margin:0 0 0 10px; background-color: #D4D0C8;">
<img src="<?php echo ( $img2 ); ?>" style="position: absolute;top: 50px;left: 12px;z-index:2;">
<img src="<?php echo ( $img3 ); ?>" style="position: absolute;top: 335px;left: 12px;z-index:2;">
<img src="<?php echo ( $img3 ); ?>" style="position: absolute;top: 50px;left: 96%;z-index:2;">
<img src="<?php echo ( $img2 ); ?>" style="position: absolute;top: 335px;left: 96%;z-index:2;">
<div name="content" style="display: flex;justify-content: center;margin-top: 18px;">
<img src="<?php echo ( $img4 ); ?>">
</div>
</div>
</div>
<div class="popup-footer">
<label style="padding: 0;">Количество действующих STUN серверов - XXX, из общего числа - YYY </label>
</div>
</div>
</div>
<?php
}
?>
<form id="popup_win" method="POST">
<input type="submit" id="win-pop-up" class="button" name="win" value="pop-up">
</form>
</body>
</html>
/* кнопка закрытия окна */
.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;
}
