<!doctype html>
<head>
<meta charset="utf-8" />
<style>
.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
width: 300px;
height: 323px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
.popup .close_window {
font-size: 13px;
display: block;
width: 6px;
height: 17px;
position: absolute;
padding: 1px 9px 4px 9px;
top: -15px;
right: -15px;
cursor: pointer;
color: #fff;
font-family: 'tahoma', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
background: -moz-linear-gradient(top, #3d51c8, #051fb8);
background: -o-linear-gradient(top, #3d51c8, #051fb8);
background: -ms-linear-gradient(top, #3d51c8, #051fb8);
background: linear-gradient(top, #3d51c8, #051fb8);
background-color: #3d51c8;
border: 1px solid #061fb8;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
text-align: center;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_window:hover {
background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
background: -o-linear-gradient(top, #051fb8, #3d51c8);
background: -ms-linear-gradient(top, #051fb8, #3d51c8);
background: linear-gradient(top, #051fb8, #3d51c8);
background-color: #051fb8;
border: 1px solid #00385E;
}
.popup .close_window:active {
background: #8f9be0;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup .close_window, .overlay').click(function (){
$('.popup, .overlay').css({'opacity':'0', 'visibility':'hidden'});
});
$('a.open_window').click(function (e){
$('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
e.preventDefault();
});
});
</script>
</head>
<body>
<a class="open_window"href="#">ОТКРЫТЬ ОКНО</a>
<div class="overlay" title="окно"></div>
<div class="popup">
<div class="close_window">x</div>
<p>Тут будет текст</p>
</div>
</body>
</html>
Telegram PirateHUB/ Pirate:
