Простое модальное окно на JQuery

Простое модальное окно на JQuery

62011-05-1255396Денис Абдуллин
Создать модальное окно на своем сайте не так сложно, как кажется на первый взгляд. Использовать простое модальное окно на JQuery в такой ситуации лучше всего, ведь это позволит анимировать определенные действия. Если никаких познаний в этом у Вас не имеется, то советую воспользоваться приведенной инструкцией. В данном примере при клике на ссылку открывается, появляется блок в центре экрана, остальная часть затемняется, что фокусирует внимание пользователя на модальном окне.

Пример

Простое модальное окно
Простое модальное окно
Закрыть


Если на сайте не подключен плагин JQuery, то воспользуемся следующим кодом (вставить между тегами <head> и </head>).



Код JavaScript



Код CSS



Код HTML


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (6)
Сергей 2011-10-15 в 21:56Спам
Можно ли сделать чтобы окно двигалось вместе со страницей ? А то оно постоянно вверху висит....
2
Денис Абдуллин 2011-10-16 в 10:25Спам
Использовать фиксированное положение
1
Гость 2011-11-18 в 20:20Спам
А как это сделать ?
0
Денис Абдуллин 2011-11-28 в 16:10Спам
position:absolute; меняем на position:fixed;
Для IE оставляем position:absolute;
2
Гость 2012-03-20 в 06:57Спам
а почему окно все время по центру экрана, как сделать чтобы было в правом верхнем углу???
-1
sergiocharm sergiocharm 2012-06-06 в 23:49Спам
right:0px; top:0px; прижмет в правом верхнем
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.