На сколько оцениваете сайт?
 Сегодня я расскажу, как создать всплывающее окно на jQuery, которое можно перетаскивать мышью, сворачивать, растягивать и, конечно, закрывать и всё это можно сделать очень маленьким скриптом!
Итак, приступим к созданию такого окна. Шаг 1. Для начала нужно скачать и подключить к документу необходимые
Code <script type="text/javascript" src="http://www.all-for-kompa.ru/All-For-Kompa/JQuery/error-url/jQuery.js"></script> <script type="text/javascript" src="http://www.all-for-kompa.ru/All-For-Kompa/JQuery/error-url/interface.js"></script> Шаг 2. Между тегами Code <head>
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; } Шаг 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></div> <img src="images/window_resize.gif" id="windowResize" /></div> Шаг 4. Перед закрывающим тегом вставим код скрипта:
Code <script type="text/javascript" src="http://www.all-for-kompa.ru/All-For-Kompa/JQuery/error-url/ready.js"></script> Источник урока: www.interface.eyecon.ro |
| Всего комментариев: 0 | |
| Популярные файлы | Новые файлы | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Главная
Форум
Регистрация
Контакты
Онлайн игры
Статистика
Всё для компа
Вход
Автор: 
Голосов: 0
