Сообщение при открытии страницы
Обновлено: 08.07.2024
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента
и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента
Теперь надо расположить
посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный
и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
В этой статье вы узнаете, как создать всплывающее окно при входе на сайт с формой входа/регистрации с помощью HTML , CSS 3 и j Query . Для реализации popup окна требуется HTML , CSS и jQuery ( Javascript ). Я расскажу, как создать простую версию, а затем мы посмотрим, как ее можно улучшить.
Начало
Сначала нужно сбросить CSS браузера и импортировать дополнительные шрифты. Я собираюсь использовать Open Sans и Varela Round , которые доступны в Google Font .
Импорт шрифтов Google
Сброс CSS и стилей сайта по умолчанию
Стили разделов body и HTML можно изменить по своему усмотрению, это мало повлияет на создаваемую форму входа и popup окно jQuery .
Затем нужно подключить на странице jQuery . Я использую ссылку на jQuery , но можно использовать локальную версию.
Ссылка на jQuery v1.10
Создание CSS-наложения
Прежде всего, необходимо создать элемент наложения и контейнер для формы входа.
Наложение добавляет черный оттенок к остальной части контента страницы, тем самым выделяя необходимый блок. Это простой CSS-эффект , использующий позиционирование и цвет фона.
Поскольку его стили разделяются на две основные части, я собираюсь объяснить их по отдельности.
Сначала рассмотрим установку позиции и добавление цвета
Разберем этот код:
- background-color: rgba(0,0,0,.25) — использование RGBA позволяет указать цвет и альфа-значение, альфа — это непрозрачность цвета;
- bottom: 0 — позиционирует элемент внизу страницы;
- left: 0 — позиционирует элемент по левому краю страницы;
- position: fixed — при прокрутке страницы позиция элемента не изменяется;
- top: 0 — позиционирует элемент вверху страницы;
- width: 100% — элемент заполняет всю ширину страницы.
Вторая часть включает flexbox CSS3 , что значительно упрощает позиционирование элементов внутри контейнера. Давайте посмотрим:
Перед тем, как перейти к popup окну для сайта, пояснение Flexbox :
- display: flex — определяет гибкий контейнер, либо inline-flex , либо block ( flex ) ;
- justify-content: center — выравнивает содержимое по центру.
Примечание : на момент написания этой статьи flexbox не полностью поддерживался во всех основных браузерах. Если хотите охватить максимальное количество браузеров, необходимо использовать префиксы:
Стили панели входа на HTML и CSS
Теперь у нас есть контейнер, и нужно разместить в нем создаваемую форму входа. Общей чертой подобных форм с popup окном jQuery является полупрозрачная граница. Мы используем элемент контейнера для достижения этого эффекта, но можно использовать границу, чтобы получить то же самое:
Большинство CSS-свойств очевидны. С помощью значения rgba мы еще раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.
Свойство, которое требует пояснений, это align-self , поскольку оно довольно новое. Это связано с flexbox . align-self определяет горизонтальное выравнивание элемента, и мы задали выравнивание точно по центру.
Далее переходим к области содержимого. До сих пор мы имели дело только с полупрозрачными фонами, так что пришло время использовать что-то сплошное:
Мы используем сплошной белый фон, поэтому вместо rgba применили только rgb . Отступ в 24 пикселя можете изменить по своему усмотрению.
Важной частью этого правила является определение position . Это необходимо при использовании абсолютно позиционированных элементов внутри контейнера — это будет кнопка закрытия.
Теперь нужно оформить внутри панели входа заголовок ( h3 ):
Чтобы выделить заголовок, я использую черный округлый шрифт с размером 1.8 em . Использование 1.8 em задает размер шрифта относительно шрифта документа. Это называется эластичностью шрифта.
Создание кнопки закрытия
Перед тем, как сделать popup окно, нужно создать кнопку закрытия формы входа. Это делается следующим образом:
Вот объяснение кода:
- background-color — мы используем приятный светло-серый фон;
- border-radius — поскольку мы создаем круг, нам нужно, чтобы радиус закругления углов границы составлял 50% от высоты;
- position: absolute — абсолютное позиционирование кнопки / ссылки, но так как для контейнера установлено относительное позиционирование, позиции всех элементов устанавливаются относительно него;
- top — расстояние от верхней части формы входа — rem — относительная зависимость, которая связана с размерами шрифта;
- transition — задает анимацию для всех свойств, используются значения 400ms ease ;
- right — расстояние от правого края экрана до формы входа.
Во втором блоке используется селектор :hover , указывающий браузеру, что делать, когда пользователь наводит на элемент курсор мыши. В этом случае кнопка становится зеленого цвета, а указатель мыши изменяет свой вид.
Создание формы входа
Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:
Сначала мы определили стили для меток формы. Благодаря этому пользователь может нажать текст и перейти к соответствующему полю формы. Элемент label работает непосредственно с id данных.
Перед тем, как сделать popup окно HTML , мы создаем элементы ввода данных формы. Я указал inset box-shadow , чтобы задать для них красивую внутреннюю тень.
Использование селектора :focus позволяет указать, как будет выглядеть элемент ввода данных, когда пользователь установил в нем курсор. Необходимо наглядно показать, что элемент в данный момент выбран.
В конце мы задаем стили с помощью селектора CSS :invalid . Когда пользователь вводит данные, которые не соответствуют заданному шаблону, элемент ввода будет отображаться с помощью этих стилей.
Стили кнопки входа
Стили кнопки не содержат ничего нового:
Для кнопки мы задали приятный синий фон с полупрозрачной темной рамкой. Этот прием позволяет не менять цвет границы, когда мы изменяем цвет фона. Мы также установили для кнопки стандартную CSS-анимацию перехода при смене цвета фона.
Как и для кнопки закрытия окна, мы зададим изменение цвета фона при наведении курсора мыши, чтобы кнопка выглядела кликабельной.
HTML-код формы входа
До сих пор все пояснения касались стилей CSS . Теперь пришло время вкратце рассмотреть разметку. В том числе и HTML popup окна.
В форме используются элементы HTML 5 , поэтому убедитесь, что doctype задан верно:
Если хотите обеспечить полную совместимость со старыми версиями браузеров и поддержку HTML 5 , включите приведенную ниже ссылку на Javascript в разделе head документа:
Полный HTML-код формы входа:
При использовании этого метода для всего сайта необходимо разместить код внутри элемента body .
jQuery / Javascript
Нужно обернуть функции jQuery в функцию, которая загружается после того, как документ готов. Это предотвращает замедление:
Чтобы создать эффект растворения, мы используем метод jQuery fadeToggle . Он позволяет значительно проще анимировать элементы.
Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click :
Приведенный выше код запускает функцию encased при нажатии элемента с идентификатором loginLink . Чтобы указать ей, что делать, когда элемент нажат, нужно сделать следующее:
Использование jQuery-функции preventDefault() позволяет остановить связь с перенаправлением пользователя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:
С помощью этой простой функции мы продублируем функционал для закрытия окна.
Нам не нужно использовать здесь функцию preventDefault() , потому что кнопкой закрытия окна не предоставляется внешняя ссылка.
В JS popup окне сделаем так, чтобы пользователь мог нажать клавишу ESC для закрытия окна:
Важно отметить, что эта функция используется в теле if . Оператор проверяет, нажал ли пользователь клавишу ESC ( код клавиши 27 ).
Поскольку мы не хотим, чтобы пользователь открывал окно с помощью клавиши ESC , нужно проверить, отображается ли окно наложения или нет.
Вот все весь код jQuery :
AJAX и HTML 5
Что, если вы захотите сделать эту форму еще лучше? Можно включить в нее форму регистрации. Вот как это можно сделать без дублирования кода с помощью запроса JQuery AJAX GET :
Мы хотим, чтобы ссылки не делали ничего другого. Используем для этого preventDefault() . Затем нужно узнать, какую страницу нужно извлечь. Это указано в HTML-атрибуте data-action .
Код страницы ajax/login-form.html будет выглядеть следующим образом:
Ссылки для вызова запроса AJAX будут выглядеть так:
Затем можно создать файл ajax/registration-form.html :
Заключение и полный код
Спасибо за внимание. Сегодня мы узнали, как сделать popup окно. Надеюсь, это руководство оказалось полезным. Вот полный код:
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!
Пожалуйста, оставляйте свои комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!
Теперь познакомимся с примером, где модальное окно будет автоматически появляться через заданный отрезок времени при открытии страницы.
Обычно модальное окно при открытии страницы используют для показа особенной текстовой информации, с помощью которой web-мастер хочет ещё более заинтересовать посетителя.
Дочитав до этого места вы должны были увидеть и закрыть пример всплывающего окна при открытии страницы без вашего ведома и без принудительного вызова с вашей стороны.
Данное модальное окно корректно подстроено под все устройства для отображения и имеет красивый внешний вид, который легко изменяется в стилях css под ваш дизайн.
Я не стал разукрашивать модальное окно и придавать ему стильный вид, потому как каждый из вас всё-равно будет делать его индивидуальным под свой сайт.
Время, через которое модальное окно должно появиться при открытии html страницы, вы каждый будете прописывать своё. А изменяется оно в коде простенького скрипта.
Для того, чтобы сделать модальное окно при открытии страницы, достаточно прописать код всплывающего окна со стилевыми свойствами и простой к нему ява скрипт.
ОСОБОЕ ВНИМАНИЕ!
Код всплывающего окна и стилевое оформление для него я прописывать здесь не буду, потому как оно полностью описано на странице: как сделать модальное окно
в последнем примере ( скопируйте оттуда без кода кнопки ).
В этом примере setTimeout(bdsd, 5000); я задал время 5 секунд, через которое и появится модальное окно после открытия страницы. Вы укажите разумеется своё.
Сегодня хочу рассказать об одной проблеме, которая часто возникает у людей, которые начинают изучать Javascript.
Они пытаются взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.
Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.
Будет выполняться раньше, чем загрузиться html-строка:
Как быть, если нам нужно выполнить код или функцию, только после того, как весь документ полностью загрузится?
Я хочу рассказать о трех способах, как это можно сделать.
Все мои уроки по Javascript здесь.
1 способ. С использованием библиотеки jQuery.
Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.
Вот как преобразиться предыдущий, код, если мы воспользуемся следующим методом.
2 способ. С помощью элемента body и атрибута onload.
3 способ. С помощью объекта window и его свойства onload.
Выбирайте тот способ, который более всего подходит к вашей ситуации, и применяйте его на практике.
Читайте также: