6 всплывающих окон на странице
Всем привет,
такая задача: на странице 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"> </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).isMinimized = true; $(this).hide(); $('#windowResize').hide(); $('#windowMax').show(); }); $('#windowMax').bind('click',function(){ var windowSize = $.iUtil.getSize(document.getElementById('windowContent')); $('#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,
спасибо, воспользуюсь первым вариантом. |
olga007,
Диалоговое окно UI |
olga007,
А принтскрин итогового вида можно ? Чот тут наворочено (*Или ссылку на демо |
Deff, я думал только мне это странным показалось)
|
Текущий скрипт с данным контентом в Опере не запускается
<!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"> </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).isMinimized = true; $(this).hide(); $('#windowResize').hide(); $('#windowMax').show(); }); $('#windowMax').bind('click',function(){ var windowSize = $.iUtil.getSize(document.getElementById('windowContent')); $('#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> |
Часовой пояс GMT +3, время: 22:33. |