|
Сообщение от wowez
|
|
jquery-1.3.2.js
|
ненадо тревожить бабушку!!!
Открывашка 204 + закрытие по клику вне блока
Открывашка 239 на основе открывашки 204
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.panel {
position: absolute;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel:nth-of-type(2) {
top: 150px;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#333333 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 40px;
font-weight: 700;
background:#222222 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}
a.trigger:nth-of-type(2){
top: 180px;
}</style>
<script>
$(function() {
var $but = $(".trigger"),
$blocks = $(".panel");
$but.each(function(i, elem) {
var $el = $(elem);
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.filter(function(j, el) {
i == j && $(el).toggle();
return i != j
}).hide();
})
});
$('html').click(function (event) {
if ($(event.target).closest('.trigger, .panel' ).length) return;
$but.filter('.active').click()
});
});
</script>
</head>
<body>
<div class="panel">
<h3>Sliding Panel</h3>
</div>
<a class="trigger" href="#">infos</a>
<div class="panel">
<h3>Sliding Panel</h3>
</div>
<a class="trigger" href="#">infos</a>
</body>
</html>