Архив метки: Web-программирование

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

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

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

  • Его вызов должен быть простым по коду
  • Закрываться окно должно по клику на фоне
  • Вся разметка содержания окна содержится в div-блоке - ничего предустановленного, кроме размеров окна, не должно быть
Читать далее Изучаю CSS, JS и jQuery. 6
Мое модальное окно на jQuery

Изучаю CSS, JS и jQuery. 5
Простейшее модальное окно

Эксперименты с командой скрыть блок
Эксперименты с командой показать блок. Скрытие по клику на предыдущей гиперссылке.
Эксперименты с командой показать блок с фоном. Скрытие по клику на фоне.
Эксперименты с командой показать фон. Скрытие по клику на фоне.
Читать далее Изучаю CSS, JS и jQuery. 5
Простейшее модальное окно

Изучаю CSS, JS и jQuery. 4
Эксперименты с модальным окном

Анализ рассмотренных примеров модальных окон
Показать div-блок. Реализована функция вызова из урока 1
Читать далее Изучаю CSS, JS и jQuery. 4
Эксперименты с модальным окном

Изучаю CSS, JS и jQuery. 3
Еще пример модального окна

Теперь посмотрим, как на основании полученных знаний сделать другое всплывающее по клику окно. Изменим стиль - возьмем его из примера, найденного в интернет. Изначально окно некорректно позиционировалось - по центру реальной страницы, которая может быть больше размеров экрана. Вот так был определен div-блок и стиль в интернет-примере:

Исходные стиль, js-функции, код div-блока и его вызов

Открыть окно

Читать далее Изучаю CSS, JS и jQuery. 3
Еще пример модального окна

Изучаю CSS, JS и jQuery. 2
Показ/скрытие div-блока как модальное окно

Теперь посмотрим, как на основании изученной простейшей функции сделать всплывающее по клику окно. Введем div-блок со стилем, взятым из рассмотренного примера всплывающего окна.

Стиль и код div-блока, рассматриваемого как всплывающее окно

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam[...]

Скрыть div-блок

Покажем это окно при помощи команд, изученных в предыдущем уроке, показать и скрыть упомянутый div-блок. Команды

Результат
Показать упомянутый div-блок
Читать далее Изучаю CSS, JS и jQuery. 2
Показ/скрытие div-блока как модальное окно

Изучаю CSS, JS и jQuery. 1
Как найти, показать и скрыть div-блок

Библиотека jQuery позволяет полностью избавить разметку от встраиваемых сценариев благодаря ее способности с легкостью перехватывать элементы страницы и присоединять к ним код естественным, CSS-подобным способом. Библиотека jQuery не ограничивается лишь вмешательством в HTML-код существующих страниц — она также позволяет добавлять новые элементы страниц и фрагменты документов с помощью коллекции удобных функций. Существуют функции для вставки новых HTML-фрагментов в любую часть страницы. Можно перемещать, удалять или клонировать существующие элементы.

Читать далее Изучаю CSS, JS и jQuery. 1
Как найти, показать и скрыть div-блок

Изучаю CSS. 3. Еще раз о позиционировании

Моя цель и способ отображения изучаемых примеров

Сначала информацию, варианты отображения которой будем исследовать, поместим в div-блок с заданным классом:

Читать далее Изучаю CSS. 3. Еще раз о позиционировании

Изучаю CSS. 2. Позиционирование чужих блоков

Моя цель и рассматриваемые примеры

Я помещаю код плагина спойлера в div-контейнер с id="vertical_1" и буду изучать возможности изменения его позиционирования. Код div-блока, отображение которого исследуется

Читать далее Изучаю CSS. 2. Позиционирование чужих блоков

Изучаю CSS. 1. Пример кнопки

Моя цель, среда программирования и рассматриваемый пример

При web-программировании необходимо отделять содержимое страницы от его оформления:

  • Структура (содержимое и элементы) документа определяется языком разметки HTML.
  • Внешний вид и расположение элементов содержимого определяется каскадной таблицей стилей CSS.

Посмотрим, как эти правила выглядят для кнопки:
Мои упражнения по программированию
Положение кнопки определено структурой документа.

HTML-код вставки кнопки
Читать далее Изучаю CSS. 1. Пример кнопки