<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Модальное окно на Bootstrap. Стилизация

Модальное окно на Bootstrap. Стилизация

Чаще всего в модальных окнах размещают формы, всплывающая форма заявки на лендинге – это классика. У Bootstrap 4, есть такой компонент, как модальное окно. Однако, мне трудно себе представить, где можно его использовать, как есть. Без какой-либо стилизации под дизайн сайта.

На этом уроке мы поместим форму заявки в модальное окно. Модальное окно откроется при клике по кнопке, затемнив всю страницу.

В документации Bootstrap, в разделе Components --> Modal, вы увидите живые примеры с модальными окнами и много различных классов. Нас интересуют, классы, отвечающие за правильную работу модального окна, а не за внешнее оформление. Дефолтные CSS стили нам предстоит изменить, на кастомные.

Кнопка вызова модального окна

Внутри тега вашей кнопки, должно быть два обязательных data атрибута от Bootstrap.

data-toggle="modal"
data-target="#exampleModal"

Идентификатор exampleModal связывает кнопку с модальным окном. Название данного идентификатора может быть любым, главное чтобы оно было одинаковым как у кнопки, так и у модального окна.

<button type="button" class="имя_вашего_класса" data-toggle="modal" data-target="#exampleModal">Оставить заявку</button>

Для стилизации кнопки задаете свой класс и прописываете ему CSS правила.

имя_селектора {
// правила
}

Модальное окно

Копируете первых три блока из примера со всеми классами и идентификатором. Напоминаю, что название id у модального окна должно совпадать с называнием id у кнопки.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
         <div class="modal-content">
            ..ваша разметка..
        </div>
    </div>
</div>

Внутри обязательных тегов, вставляете свою разметку. Если внутри у вас будет форма заявки, то HTML код будет примерно таким.

<form class="form" action="/" method="post">
    <div class="form__group">
        <input type="text" placeholder="Ваше имя">
    </div>
    <div class="form__group">
        <input type="email" placeholder="Ваш e-mail">
    </div>
    <div class="form__group">
        <input type="tel" placeholder="Ваш телефон">
    </div>
    <button class="btn" type="submit">Оставить заявку</button>
</form>

Как поставить модальное окно по центру

Для вертикального выравнивания у Bootstrap имеется класс modal-dialog-centered, который нужно добавить в div с классом modal-dialog.

<div class="modal-dialog modal-dialog-centered" role="document"> </div>

Размер модального окна

Модальные окна имеют три класса-модификатора, определяющих их максимальную ширину.

-sm    // 300px
-lg    // 800px
-xl    // 1140px

По умолчанию максимальная ширина модального окна – 500 пикселей. Для изменения дефолтного размера, следует добавить класс-модификатор к .modal-dialog.

Как закрыть модальное окно

Модальное окно закроется при клике в любом месте страницы или по кнопке с крестиком. Если не нужна стилизация, то можете вставить в разметку тег button, скопировав его из Bootstrap.

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">×</span>
</button>

Если внешний вид бутстраповского крестика отличается по дизайну, то стилизуйте как вам нужно. Добавьте к блоку с закрывающей иконкой атрибуты с классами.

data-dismiss="modal"
aria-label="Close"

Как изменить цвет и прозрачность затемнения

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

$modal-backdrop-bg: #000;
$modal-backdrop-opacity: .7;

Не стоит ничего менять в файлах Bootstrap, создайте свой файл с переменными и переопределите, прописав свои значения.

Заключение

Умение стилизовать компоненты Bootstrap позволяет верстальщикам, не знающим JavaScript, делать простенькие пользовательские интерфейсы. Если хотите узнать об этом больше, то переходите на промо-страницу видео-курса по Bootstrap .

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.