Вход

Просмотр полной версии : 6 всплывающих окон на странице

olga007
28.02.2013, 13:24
Всем привет,
такая задача: на странице 6 ссылок в виде разных картинок. По нажатию на каждую должно всплывать окошко с описанием.
Как сделать такое окошко для 1 ссылки я нашла в интернете, но как сделать для 6 ссылок с разными id? Не переписывать же скрипт 6 раз :-)
Подскажите пожалуйста....

html:
<body>
<div id="wrapper">
<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
<a href="" id="windowOpen6"></a>
<div id="window">
<div id="windowTop">
<div id="windowTopContent">
Дом 6
</div>
<img src="images/window_min.jpg" id="windowMin" />
<img src="images/window_max.jpg" id="windowMax" />
<img src="images/window_close.jpg" id="windowClose" />
</div>
<div id="windowBottom">
<div id="windowBottomContent">&nbsp;
</div>
</div>

<div id="windowContent">
<img src="images/dom6.jpg" alt="" width="275" height="185" />
</div>
<img src="images/window_resize.gif" id="windowResize" />
</div>
</div>
</body>

скрипт:
$(document).ready(
function()
{
$('#windowOpen6').bind('click',function() {
if($('#window').css('display') == 'none') {
$(this).TransferTo(
{
to:'window',
className:'transferer2',
duration: 200,
complete: function()
{
$('#window').show();
}
});
}
this.blur();
$("#bg").css('opacity', '0.7');
return false;
});

$('#windowClose').bind('click',function(){
$('#window').TransferTo(
{
to:'windowOpen',
className:'transferer2',
duration: 200
}).hide();
$("#bg").css('opacity', '1');
});

$('#windowMin').bind('click',function(){
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
$('#window').animate({height:40},300).get(0).isMin imized = true;
$(this).hide();
$('#windowResize').hide();
$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
var windowSize = $.iUtil.getSize(document.getElementById('windowCon tent'));
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
$(this).hide();
$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
minWidth: 575,
minHeight: 385,
maxWidth: 575,
maxHeight: 385,
dragHandle: '#windowTop',
handlers: {
se: '#windowResize'
},

onResize : function(size, position) {
$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
if (!document.getElementById('window').isMinimized) {
windowContentEl.css('height', size.height - 48 + 'px');
}
}
});
}
);

Спасибо, буду признательна за подсказку...
ksa
28.02.2013, 15:06
как сделать для 6 ссылок с разными id?
Варианты:
- передавать ИД параметрами
- использовать классы и структуру ДОМ
olga007
28.02.2013, 15:42
ksa,

спасибо, воспользуюсь первым вариантом.
рони
28.02.2013, 23:27
olga007,
Диалоговое окно UI (http://jquery.page2page.ru/index.php5/%D0%94%D0%B8%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2%D 0%BE%D0%B5_%D0%BE%D0%BA%D0%BD%D0%BE_UI)
Deff
28.02.2013, 23:49
olga007,
А принтскрин итогового вида можно ?
Чот тут наворочено (*Или ссылку на демо
cyber
28.02.2013, 23:50
Deff, я думал только мне это странным показалось)
Deff
28.02.2013, 23:52
Текущий скрипт с данным контентом в Опере не запускается
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>


<script src="http://code.jquery.com/jquery-latest.js"></script>


</head>
<body>
<body>
<div id="wrapper">
<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
<a href="" id="windowOpen6"></a>
<div id="window">
<div id="windowTop">
<div id="windowTopContent">
Дом 6
</div>
<img src="images/window_min.jpg" id="windowMin" />
<img src="images/window_max.jpg" id="windowMax" />
<img src="images/window_close.jpg" id="windowClose" />
</div>
<div id="windowBottom">
<div id="windowBottomContent">&nbsp;
</div>
</div>

<div id="windowContent">
<img src="images/dom6.jpg" alt="" width="275" height="185" />
</div>
<img src="images/window_resize.gif" id="windowResize" />
</div>
</div>


<script type="text/javascript">
$(document).ready(
function()
{
$('#windowOpen6').bind('click',function() {
if($('#window').css('display') == 'none') {
$(this).TransferTo(
{
to:'window',
className:'transferer2',
duration: 200,
complete: function()
{
$('#window').show();
}
});
}
this.blur();
$("#bg").css('opacity', '0.7');
return false;
});

$('#windowClose').bind('click',function(){
$('#window').TransferTo(
{
to:'windowOpen',
className:'transferer2',
duration: 200
}).hide();
$("#bg").css('opacity', '1');
});

$('#windowMin').bind('click',function(){
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
$('#window').animate({height:40},300).get(0).isMin imized = true;
$(this).hide();
$('#windowResize').hide();
$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
var windowSize = $.iUtil.getSize(document.getElementById('windowCon tent'));
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
$(this).hide();
$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
minWidth: 575,
minHeight: 385,
maxWidth: 575,
maxHeight: 385,
dragHandle: '#windowTop',
handlers: {
se: '#windowResize'
},

onResize : function(size, position) {
$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
if (!document.getElementById('window').isMinimized) {
windowContentEl.css('height', size.height - 48 + 'px');
}
}
});
}
);

</script>





</body>
</html>