Урок 17. Всплывающие окна | Курс Веб разработчик | Академия верстки

Автор Sergei Plotnenko
Урок 17. Всплывающие окна | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артем Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно в YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашка дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на. Ютюбе Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет на связи. Артём Исламов мы продолжаем изучать основы веб-разработки. Сегодня у нас на очереди. Урок про модальные окна. Я думаю вы все уже видели всплывающие окна на сайтах. Например если вы смотрите сайт. ВКонтакте конкретно какую-нибудь фотогалерею то скорее всего вы смотрите её во всплывающем окне то есть сначала есть сайт и поверх этого сайта на. Затем он наезжает вот такое небольшое окно и в нём содержится какой-то. Контент — это и называется всплывающим окном. Сегодня мы разберем стандартные с помощью кнопок bootstrap как его использовать узнаем про библиотеку magnific-popup которая позволяет подключать в модальные окна и рассмотрим пример модального окна от сайта отдыхала.. Итак поехали для того чтобы работала наши всплывающее окно bootstrap. Она кстати находится в разделе на сайте getbootstrap.com джаваскрипт в подразделе модуль всё описание находится здесь вот так — это модальное окно выглядит. Но для того чтобы она работала необходимо наших макет следующим образом во-первых должны быть подключены стиле огурцы без подключенных все стили отпустив работать не будет. Я использовал стартовый шаблон здесь стиле подключается через. Седина То есть я их не скачиваю к себе на компьютер подключить удалённый можно сказать то есть я подключила вот таким вот образом можно для этого воспользоваться сайтом быстро обсидиан. затем обязательно для работы всех jquery plugin должна быть. Сначала подключена библиотека. Я тоже подключил удалённых для этого можно воспользоваться сервисом жёны скопировать ссылку отсюда скопировать ссылку и вставить эту ссылку вот сюда также для модальные окна бутстрап обязательно должен быть подключен Java Script File потому, что здесь уже всё будет работать имена на J клиренс то есть модальные окна — это могут можно скачать отдельно этот файл загуглите найти, а можно подключать полностью файл библиотеки jquery.min.js всё готова для работы и сейчас я готов прямо как работает собственная эти модели как работают эти модальные окна я создал ссылку и кнопку ссылку нас имеет класс. Линк стандартный быстро. Пускай теперь она выглядит вот так более-менее симпатичных. Пока никуда не ведет. То есть вы человек ничего не стоит я сейчас скопирую — это вот таким вот образом так пока она никуда не ведет кнопка у нас имеет Class btn btn-success — это тоже стандартные классы bootstrap — это же пока никуда не ведет как сделать так чтобы появилось собственное эта модель окном здесь я закомментировать, что здесь будет находиться модальное. Окно Окно от bootstrap она теперь для того чтобы им воспользоваться необходимо найти пример кода вот он. Это пример участка кода модального окна я скопирую его и просто. Перенесу в наш проект вставлю вот сюда при помощи контрл Shift в здесь объясню что. За, что отвечает во-первых есть главный Def он отвечает за то чтобы. Появилось появилось затемнение фона если появилась собственно сама модальное окно — это режим анимации появления tabindex можно стереть то как себя будет вести модальное окно когда пользователи будут нажимать клавишу Tab ролл диалог тоже значение для группы говорящего разметки поэтому мы их уберём чтобы не отвлекали и так — это собственно сама модальное окно. Вот она на модуль fait mal диалог — это можно, что собственно сама вот — это вот белое окно сама так подпишу белая модальное окно дальше идёт Def который называется модуль континент, а — это уже содержимое модального окна дальше идёт модуль х — — это то, что находится. Вот в этой части модального окна то, что отдельно полоской — это кнопка закрыть и подзаголовок то есть — это шапка модального окна дальше идёт в мотор Hidea есть кнопка закрыть после этого есть подзаголовок то есть — это заголовок. Ну да это-то есть — это наш вот так вот заголовок дальше идёт модуль то есть содержимое. Ну — это получается тела модального окна в нём можно писать всё, что угодно тут может быть даже не текста любой контент в хутор — это так называемые подвал подвал модального окна. То есть — это вот — это часть в ней могут находиться кнопки. Если нам не нужен модуль которому мы можем удалить. Как видите ничего сложного нет я просто по детально разобрал что. За, что отвечает. А всё — это написано точно также в документации. То есть если. Прочитайте посмотреть примеры. Здесь всё предельно просто. Ну как вы там всё очень просто там где у нас написано div Class modal fade. То есть самый главный самый первый Def нужно там прописать идентификатор. Именно поэтому идентификатору мы будем обращаться к этому модель здесь может быть написано всё, что угодно пример модуль может быть написано Works если — это какая-то работа. Маркс или там всё, что угодно может быть мы напишем моему другу теперь нам нужно обратиться к этому модальным окном то есть чтобы она показалась чтобы она была. Видном чтобы она стала видимой на.

0 комментариев
0

Читайте также