Всплывающее окно для блока баннеров

Поделиться1Вс, 6 Сен 2015 17:53:51

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Привет! Помогите пофиксить код.
Мне нужно сделать, чтоб при наведении на картинку в шапке или футере, у меня всплывало нужных размеров окошко с кликабельными баннерами.
http://hptest.1bb.ru/
Есть у меня вот такой код.

Код:

/* Tooltips
 -------------------------------------------------------------*/
.tooltip {
border: none; 
color: #000000;
text-decoration: none;
position: relative;}

.tooltip span {
margin-left: -999em;
position: absolute;}

.tooltip:hover span {
font-family:verdana;
position: absolute;
left: 60px; 
top: -60px; 
z-index: 99;
margin-left: 0;}

.tooltip:hover img {
left: 1em; 
top: 2em; 
z-index: 99;
margin-left: 0;}

.tip { 
position: absolute;
background: url("http://s4.uploads.ru/gLG7k.png") !important;
color: #363636;
border: 2px solid #898989;
z-index: 1000;
width: 150px;
padding: 5px; 
text-align: justify; 
line-height: 10px;
font-family: verdana;
font-size: 10px;
}

Код:

<div style="position: absolute; top:111px; margin-left: 39px; width:50px;">
    <a class="tooltip"><img src=http://i.imgur.com/hafrotS.jpg>
    <span class="custom text">  <div class=cont><center><a href="http://supernaturalbrothers.ru" target=_blank title="Самая Сверхъестественная ролевая игра"><img src="http://s7.uploads.ru/N1fW3.gif"></a></center>
    </span></div> </a> 
    </div>

И все в нем как надо, кроме того, что он работает только с текстом. Вставляешь баннер-ссылку и все слетает, т.е. всплывающий блок для ссылок не годится. Косяк виден слева в шапке.
Как сделать чтоб там баннеры нормально встали?

Отредактировано Иса (Вс, 6 Сен 2015 17:55:42)

0

Поделиться2Вс, 6 Сен 2015 18:06:20

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 15:16:21

Иса
1. Нарисуйте в ФШ как должно выглядеть без наведения и при наведении

0

Поделиться3Вс, 6 Сен 2015 18:14:44

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Deff

0

Поделиться4Вс, 6 Сен 2015 20:02:42

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 15:16:21

Иса
1. Поскольку всплывающее окно большое, лучше делать всплывание не по наведению, а по клику! Ибо при случайном задевании (к примеру при прокрутке и курсоре чуть в стороне будет вечно всплывать и мешаться)
2. Мну же просил два скриншота( ну пока забить, ответьте на первый вопрос)

0

Поделиться5Вс, 6 Сен 2015 20:12:00

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Deff
:blush: можно и по клику.
А без наведения как есть на форуме.
Картинка под кнопку простая будет

0

Поделиться6Вс, 6 Сен 2015 21:08:08

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 15:16:21

В HTML верх:

<style type="text/css">
.banners_show_Hide {
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed; left:0;top:0;
z-index:20000;
width:100%;height:100%;
}
.banners {
background-color:#D7CB6C;
position: absolute; left:0;right:0; top:0; bottom:0;
margin:auto;
padding:9px;
width:450px;
height:230px;
overflow:hidden;
overflow-y:auto;
border-radius:23px;
}
.banners .close {
display:inline-block;
cursor:pointer;
position: absolute;
top:10px;
right:12px;
color:#fff;
font: normal normal 700 17px/normal Tahoma;
text-shadow: 1px 1px 3px #000;
}
.Kn-banners {
cursor:pointer;
}
</style>

Cтавим куда нужно, вместе с кнопкой Код можно размножать

<div class="banners_show_Hide">
<div class="banners"><span class="close" title="Закрыть">Х</span>

</div>
</div>

<img class="Kn-banners"src="http://s3.uploads.ru/MgbrF.jpg" alt="Банеры" title="Банеры"/>

В конец HTML низ

<script type="text/javascript">
$('.Kn-banners').click(function() {
$(this).prevAll('.banners_show_Hide:first').addClass('active').show();
});
$('.banners_show_Hide.active').live('click', function() {
$(this).removeClass('active').hide();
});
$('.banners').click(function() {
return false;
});
$('.banners .close').click(function() {
$(this).parent().parent().click();
});
</script>

0