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

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

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

Пример

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


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



Код JavaScript



Код CSS



Код HTML



Комментарии (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
Чтобы оставить комментарий или отзыв под этой публикацией,
зарегистрируйтесь или войдите.