Итак, буду вам расказывать как делать разные прикольные фишки по методам jQuery =) итак начнёмс... Сейчас я бы хотел расказать как сделать всплывающее окно по методам jQuery Для начала нужно скачать и подключить к документу необходимые скрипты. Code: <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript" src="interface.js"></script> скачать jQuery.js можно на http://jquery.com/ скачать interface.js можно на http://interface.eyecon.ro/interface/interface_1.2.zip Между тегами <head> или в отдельном CSS файле пропишем следующие стили для нашего окна: Code: #window { position: absolute; left: 200px; top: 100px; width: 400px; height: 300px; overflow: hidden; display: none; } #windowTop { height: 30px; overflow: 30px; background-image: url(images/window_top_end.png); background-position: right top; background-repeat: no-repeat; position: relative; overflow: hidden; cursor: move; } #windowTopContent { margin-right: 13px; background-image:url(images/window_top_start.png); background-position:left top; background-repeat: no-repeat; overflow: hidden; height: 30px; line-height: 30px; text-indent: 10px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; color: #6caf00; } #windowMin { position: absolute; right: 25px; top: 10px; cursor: pointer; } #windowMax { position: absolute; right: 25px; top: 10px; cursor: pointer; display: none; } #windowClose { position: absolute; right: 10px; top: 10px; cursor: pointer; } #windowBottom { position: relative; height: 270px; background-image: url(images/window_bottom_end.png); background-position: right bottom; background-repeat: no-repeat; } #windowBottomContent { position: relative; height: 270px; background-image: url(images/window_bottom_start.png); background-position: left bottom; background-repeat: no-repeat; margin-right: 13px; } #windowResize { position: absolute; right: 3px; bottom: 5px; cursor: se-resize; } #windowContent { position:absolute; top: 30px; left: 10px; width: auto; height: auto; overflow: auto; margin-right: 10px; border: 1px solid #6caf00; height: 255px; width: 375px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; background-color: #fff; } #windowContent * { margin: 10px; } .transferer2 { border: 1px solid #6BAF04; background-color: #B4F155; filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; } Вставим ссылку, по которой будет открываться всплывающее окно, а затем непосредственно сам код блока окна. Code: <a href="" id="windowOpen">Открыть всплывающее окно</a> <div id="window"> <div id="windowTop"> <div id="windowTopContent">Название окна</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"><p>Содержание всплывающего окна</p></div> <img src="images/window_resize.gif" id="windowResize" /></div> Перед закрывающим тегом </body> вставим код скрипта: Code: <script type="text/javascript"> $(document).ready( function() { $('#windowOpen').bind( 'click', function() { if($('#window').css('display') == 'none') { $(this).TransferTo( { to:'window', className:'transferer2', duration: 400, complete: function() { $('#window').show(); } } ); } this.blur(); return false; } ); $('#windowClose').bind( 'click', function() { $('#window').TransferTo( { to:'windowOpen', className:'transferer2', duration: 400 } ).hide(); } ); $('#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: 200, minHeight: 60, maxWidth: 700, maxHeight: 400, 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> Впринципе готово... первоисточником урока является www.interface.eyecon.ro Перевод ITW-Team (моя design-команда)
Ээээ... ппц полный ) Это делается 1 строчкой: $('#hidden_div').show(); Где скрытый див изначально есть в верстке и сделан новым слоем, чтобы быть поверх.