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

62011-05-1266346Денис Абдуллин

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

Пример

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

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

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

Код JavaScript

Код CSS

Код HTML

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (6)

Порядок вывода комментариев:

sergiocharm sergiocharm 2012-06-06 в 23:49 / МатериалСпам

right:0px; top:0px; прижмет в правом верхнем

Гость 2012-03-20 в 06:57 / МатериалСпам

а почему окно все время по центру экрана, как сделать чтобы было в правом верхнем углу???

-1

Денис Абдуллин 2011-11-28 в 16:10 / МатериалСпам

position:absolute; меняем на position:fixed;
Для IE оставляем position:absolute;

Гость 2011-11-18 в 20:20 / МатериалСпам

А как это сделать ?

Денис Абдуллин 2011-10-16 в 10:25 / МатериалСпам

Использовать фиксированное положение

Сергей 2011-10-15 в 21:56 / МатериалСпам

Можно ли сделать чтобы окно двигалось вместе со страницей ? А то оно постоянно вверху висит....

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.