информация взята здесь: https://www.cyberforum.ru/html/thread1743027.html
CSS+ Java Script
выглядит так:
посмотреть демо
код сего действа:
Код: Выделить всё
<!DOCTYPE HTML>
<html><head>
<title>DIVное окно!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#divWin {
position:absolute;
width:300px;
height:200px;
border:3px solid green;
background:yellow;
visibility:hidden;
padding:20px;
text-align:center;
}
#divWin div div{
float: left;
}
#closetButton {
position:absolute;
top:0;
right:0;
border-bottom:3px solid green;
border-left:3px solid green;
font-weight:bold;
cursor:pointer;
padding:2px 4px
}
p{
cursor:pointer;
}
</style>
<script type="text/javascript">
function winOpen(){
var obj=document.getElementById("divWin").style;
obj.visibility="visible";
winOpen2(20, 0, obj); <!--вместо 20 было 3-->
};
function winOpen2(s, o, obj){//показываем окно
o+=s;
if(o<100){
<!--obj.opacity=o/100;
<!--obj.filter='alpha(opacity='+o+')';-->
setTimeout(function(){
winOpen2(s, o, obj);
}, 5); <!--было 55-->
}
else{//показать полностью
obj.opacity=1;
obj.filter='alpha(opacity=100)';
};
};
function winCloset(){
winCloset2(5, 10, document.getElementById("divWin").style);<!--вместо 10 было 100-->
};
function winCloset2(s, o, obj){//скрываем окно
o-=s;
if(o>0){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){
winCloset2(s, o, obj);
}, 5);<!--было 55-->
}
else{//обнуляем на выходе
obj.opacity=0;
obj.filter='alpha(opacity=0)';
obj.visibility="hidden";
};
};
</script>
</head>
<body>
<a href="#" onclick="winOpen();">Войти</a>
<br><br>
<div id="divWin"> Здесь помещается содержимое <div id="closetButton" onclick="winCloset();">Х</div> </div>
</body>
</html>
****************************
Второй открывающийся блок (с красивостями) на чистом CSS:
информация взята здесь: https://www.cyberforum.ru/html/thread1743027.html
посмотреть демо:
Вызвать окно
скачать демо: https://phpbb-belk.ru/download/demo/blok-css.html
код сей красивости:
Код: Выделить всё
<style>
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
background-color: rgba(0, 0, 0, 0.65);
position: fixed;
cursor: default;
}
.overlay:target {
display: block;
}
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 600px;
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #fefefe;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.overlay:target+.popup {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
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: #000;
-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: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
</style>
<a href="#win1" class="button button-green">Вызвать окно</a>
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
А вот и окошко!
<a class="close"title="Закрыть" href="#close"></a>
</div>
