Изучаю CSS, JS и jQuery. 6
Мое модальное окно на jQuery

© Башаров А.М. 2014

В результате предыдущих экспериментов я спрограммировал свое модальное окно на jQuery из следующих соображений требований.

  • Его вызов должен быть простым по коду
  • Закрываться окно должно по клику на фоне
  • Вся разметка содержания окна содержится в div-блоке - ничего предустановленного, кроме размеров окна, не должно быть

Само окно и фон задаем div-блоками

со следующими стилями. Показать окно со стилями

Скрыть окно со стилями

Содержание окна прописывается в div-блоке

Вызов окна осуществляется по клику

при помощи функции show_pop()

Скрытие окна осуществляет функция, вызываемая по клику на фоне

Эффект анимации обеспечивает hide(400); где 400 мс -длительность исчезновения окна. Можно было бы и постепенно показывать окно при помощи функции show(); но я думаю, что здесь это лишнее.
Похожей программы на просторах интернет я не нашел, но я использовал результаты предыдущих уроков. При этом я не стал использовать обертку для краткости кода вызова окна. Также, как и предустановленную разметку (заглавие окна, знак close). Все это уже мне не трудно сделать при необходимости.

Показываем окно 1.
Показываем окно 2.

Первый текст
Ха-ХА
Второй текст/ Греческая буква из Latex \mu Математика и физика с Асхатом Башаровым

Необходимость описанного выше окна возникла для меня после того, как на данном сайте перестали работать окна, сделанные на основе плагина HighSlide JS. При этом, при загрузке js-кода плагина с сайта www.003.www.ru при некоторых изменениях плагин снова работает. Но вариант вызова окон на основе плагина HighSlide JS меня более не устраивает. Хотя окно, привязанное к месту клика, меня еще интересует, но его вызов, как мне представляется, следует реализовать аналогично представленному здесь простому способу. Это попробую сделать на jQuery в будущем.

Добавить комментарий