Всплывающее окно с содержимым в разделе.

автор Домовой Пн 2 Янв - 21:37

Всплывающее окно с содержимым в разделе.

1. В шаблон overall_footer перед </body> вставляем скрипт:

Код:: <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.tutorbutton').click(function(){ jQuery(this).parent().children('div.tutorCont').slideToggle("slow"); return false; }); }); </script>

2. В описание раздела вставляем следующее:

Код:: <br/><div class="tutor"><div class="tutorbutton"><img src="картинка кнопка" title="описание" alt="описание"></div><div style="DISPLAY: none; position: absolute;" class="tutorCont"><div style="overflow: scroll; overflow-x: hidden; height: 500px;"> ЗДЕСЬ СОДЕРЖИМОЕ ОКНА </div></div></div>

3. В СSS

Код:: .pun table td.tcl { overflow:visible; } .tutor { position:relative; width:150px; /*ширина кнопки*/ height:21px; /*высота кнопки*/ } .tutor div.tutorCont { position:absolute; height:auto; width:735px; /*ширина окна*/ background-color:#fff !important; /*фон окна*/ z-index: 999; margin-top:5px; /*отступ окна от кнопки*/ border:2px solid #B38000; /*толщина, стиль и цвет рамки окна*/ padding:3px; }

В результате получаем кнопку в разделе

Всплывающее окно с содержимым в разделе. 1853833m

Кликнув на кнопку открывается окно

Всплывающее окно с содержимым в разделе. 1433979m

Живой пример можно увидеть ЗДЕСЬ