Модальное окно · bootstrap на русском

Шаг 3. Добавляем CSS для модального окна

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

PHP

/*CSS-свойства для заднего фона*/
.iw-modal {
opacity: 0; /*изначально этот блок должен быть прозрачным*/
background: rgba(0,0,0,0.7); /*задаём цвет фона*/
pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1; /*при клике блок становится видимым*/
pointer-events: auto; /*теперь по блоку можно кликать мышкой*/
overflow-y: auto; /*прокрутка по вертикли страницы*/
}
.iw-modal-wrapper {
margin:auto; /*выравниваем модальное окно по центру по горизонтали*/
margin-top:25vh; /*отступ сверху можно задавать в px, % или vh*/
}
/*CSS-свойства для блока, содержащего контент модального окна */
.iw-CSS-modal-inner {
position: relative;
background: #fff; /*цвет фона*/
border: 1px solid #ccc; /*цвет и толщина рамки*/
border-radius: 0px; /*радиус скругления углов*/
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
padding: 15px;/*внутренний отступ*/
background:#f1f1f1;/*цвет фона*/
position:relative;
}
.iw-modal-title {
font-size: 18px; /*размер шрифта*/
color:#555; /*цвет шрифта*/
font-weight:bold; /*жирность шрифта*/
line-height: 1.5; /*высота строки*/
margin-top: 0;
margin-bottom: 0;
}
/*CSS для кнопки закрытия*/
.iw-close {
position:absolute;
top:15px; /*отступ сверху*/
right:10px; /*отступ справа*/
font-size: 24px; /*размер шрифта*/
color: #555; /*цвет шрифта*/
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000; /*цвет шрифта при наведении*/
cursor: pointer;
}
/*CSS для блока с текстом*/
.iw-modal-text {
padding: 15px 20px; /*внутренний отступ*/
}
/**MEDIA**/
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

/*CSS-свойства для заднего фона*/

.iw-modal{

opacity;/*изначально этот блок должен быть прозрачным*/

backgroundrgba(,,,0.7);/*задаём цвет фона*/

pointer-eventsnone;/*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/

positionfixed;

top;

right;

bottom;

left;

z-index9999;

transitionall0.5sease;

margin;

padding;

}

.iw-modaltarget{

opacity1;/*при клике блок становится видимым*/

pointer-eventsauto;/*теперь по блоку можно кликать мышкой*/

overflow-yauto;/*прокрутка по вертикли страницы*/

}

.iw-modal-wrapper{

marginauto;/*выравниваем модальное окно по центру по горизонтали*/

margin-top25vh;/*отступ сверху можно задавать в px, % или vh*/

}

/*CSS-свойства для блока, содержащего контент модального окна */

.iw-CSS-modal-inner{

positionrelative;

background#fff; /*цвет фона*/

border1pxsolid#ccc; /*цвет и толщина рамки*/

border-radius0px;/*радиус скругления углов*/

}

/*CSS-свойства заголовка модального окна */

.iw-modal-header{

padding15px;/*внутренний отступ*/

background#f1f1f1;/*цвет фона*/

positionrelative;

}

.iw-modal-title{

font-size18px;/*размер шрифта*/

color#555; /*цвет шрифта*/

font-weightbold;/*жирность шрифта*/

line-height1.5;/*высота строки*/

margin-top;

margin-bottom;

}

/*CSS для кнопки закрытия*/

.iw-close{

positionabsolute;

top15px;/*отступ сверху*/

right10px;/*отступ справа*/

font-size24px;/*размер шрифта*/

color#555; /*цвет шрифта*/

text-decorationnone;

}

.iw-closehover,.iw-closefocus{

color#000; /*цвет шрифта при наведении*/

cursorpointer;

}

/*CSS для блока с текстом*/

.iw-modal-text{

padding15px20px;/*внутренний отступ*/

}

/**MEDIA**/

@media(min-width550px){

.iw-modal-wrapper{

max-width500px;

}

Сохраняем все файлы, в которые вы вносили изменения, обновляем страницу сайта и любуемся своим CSS модальным окном.

Modal Header and Footer

Usew3-container classes to create different sections inside the modal
content:

Open Modal with Containers

Some text..

<div id=»id01″ class=»w3-modal»> <div class=»w3-modal-content»>    <header class=»w3-container w3-teal»>       <span onclick=»document.getElementById(‘id01’).style.display=’none'»
      class=»w3-button w3-display-topright»>×</span>      <h2>Modal Header</h2>    </header>    <div
class=»w3-container»>      <p>Some text..</p>
<p>Some text..</p>    </div>    <footer class=»w3-container
w3-teal»>      <p>Modal Footer</p>    </footer> </div></div>

Modal As a Card

To display the modal as a card, add one of the w3-card-* classes to the
w3-modal-content container:

Open Modal as a Card

Some text..

Animated Modals

Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:

Zoom InTopBottomLeftRightFade In

Some text..

You can also fade in the modal’s background color by setting the
w3-animate-opacity class on the w3-modal element:

Fade in Modal

Modal Image

Click on the image to display it as a modal, in full size:

Modal Image Gallery

Click on an image to display it in full size:

<div class=»w3-row-padding»> <div class=»w3-container w3-third»>
<img src=»img_snowtops.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»>    <img
src=»img_lights.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»>    <img
src=»img_mountains.jpg» style=»width:100%» onclick=»onClick(this)»>
</div></div><div id=»modal01″ class=»w3-modal» onclick=»this.style.display=’none'»>
<img class=»w3-modal-content» id=»img01″ style=»width:100%»></div><script>function
onClick(element) { document.getElementById(«img01»).src = element.src;
document.getElementById(«modal01»).style.display = «block»;}</script>

Modal Login Form

This example creates a modal for login:

×
Username
Password
Login
Remember me

Cancel
Forgot password?

Open Login Modal

London

London is the most populous city in the United Kingdom, with a metropolitan area of over
9 million inhabitants.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paris is the capital of France.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo is the capital of Japan.

Open Tabbed Modal

Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

// Get the modalvar modal = document.getElementById(‘id01’);
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {  if (event.target
== modal) {    modal.style.display = «none»;
  }}

This example shows how to add an image slideshow inside a modal, to create a «lightbox»:

❮
❯

Убрать эффект затухания

Вы можете удалить класс .fade, чтобы избавиться от эффекта затухания при открытии и закрытии окна.

ИНСТРУКЦИЯ:

ШАГ 1: Подключаем CSS стили

<!DOCTYPE HTML>
<html>

<head>
<title>...</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!--===== RuBizCSS3Modal | Styles =====-->
<link rel="stylesheet" type="text/css" href="rubizcss3modal.css">

</head>
<body>
<!--===== Контент ==-->
</body>
</html>

Если устанавливаете на WordPress, то рекомендую использовать плагин «Simple Custom CSS», куда и поместите стили RuBizCSS3Modal. Просто скопируйте все стили в файле «RuBizCSS3Modal.css» и поместите их в плагин «Simple Custom CSS». У меня есть видеоинструкция по работе с данным плагином .

ШАГ 2: Привязываем к элементу

<!--===== OPEN RuBizCSS3Modal =====-->
<a href="#open_RuBizCSS3Modal" class="RuBizCSS3Modal_button">
    ОТКРЫТЬ RuBizCSS3Modal
</a>
<!--===== / OPEN RuBizCSS3Modal =====-->

Вы можете привязать как к отдельному слову или тексту, так и к любой картинке. Просто заключите нужный элемент в тег «a», что сверху. В моем случае, к окну привязан текст «ОТКРЫТЬ RuBizCSS3Modal».

Если хотите настроить два окна, например как у меня на этой странице, то дабавьте к концу ID окна «2», или «3» и т.д. (как пример id=»open_RuBizCSS3Modal2″) Соответственно, для уникальной кнопки тоже добавьте то же число.

Как пример:

<!--===== Открыть RuBizCSS3Modal 2 =====-->
<a href="#open_RuBizCSS3Modal2" class="RuBizCSS3Modal_button">
    ОТКРЫТЬ RuBizCSS3Modal 2
</a>
<!--===== RuBizCSS3Modal 2 =====-->
<div id="open_RuBizCSS3Modal2" class="RuBizCSS3Modal">
    ...
</div>
 
...
 
<!--===== Открыть RuBizCSS3Modal 3 =====-->
<a href="#open_RuBizCSS3Modal3" class="RuBizCSS3Modal_button">
    ОТКРЫТЬ RuBizCSS3Modal 3
</a>
<!--===== RuBizCSS3Modal 3 =====-->
<div id="open_RuBizCSS3Modal3" class="RuBizCSS3Modal">
    ...
</div>

ШАГ 3: Настраиваем окно

<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">

    
    <a href="#x" class="o_close_RuBizCSS3Modal"></a>

    
    <div class="RuBizCSS3Modal_content effect1">

        <div class="rb_zagolovok">Чтобы посмотреть это видео</div>
        <center>
            <div class="rb_text">Вам <u>необходимо ввести</u><br />
                <strong>Ваше Имя и Ваш E-Mail</strong> под картинкой.
            </div>
            <div class="rb_text">Ссылка на видео будет в письме.</div>
            <div class="rb_text">+ секретный бонус...</div>
        </center>

        
        <a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
    </div>
</div>

Вы можете поместить этот код в любое место на сайте, желательно, где-то в конце — около </body>

Также, заметьте, у окна указан «эффект 1», т.е. смотрите тут<div class=»RuBizCSS3Modal_content effect1″>. С обновлениями будут доступны и другие эффекты, т.е. «effect2» и т.д.

Модальные Галерея изображений

Нажмите на картинку, чтобы увидеть его в полном размере:

пример

<div class=»w3-row-padding»> <div class=»w3-container w3-third»>
<img src=»img_fjords.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»>    <img
src=»img_lights.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»>    <img
src=»img_mountains.jpg» style=»width:100%» onclick=»onClick(this)»>
</div></div><div id=»modal01″ class=»w3-modal» onclick=»this.style.display=’none'»>
<img class=»w3-modal-content» id=»img01″ style=»width:100%»></div><script>function
onClick(element) { document.getElementById(«img01»).src = element.src;
document.getElementById(«modal01»).style.display = «block»;}</script>

Basic CSS

I’m a fan of minimalist design and try to use this in all my websites. This style typically focuses more on the user experience and creating simple yet intuitive interfaces.

This modal window script created by developer Timothy Long is a fantastic example of minimalism in action.

It runs like many of the other scripts and works on pure CSS. Although this one is not meant to be totally response from what I can tell, but it may just be an issue with CodePen’s viewer.

Yet with only 90 lines of CSS and 15 lines of HTML this should be an easy thing to recreate and even expand with responsive styles on your own.

Modal As a Card

To display the modal as a card, add one of the w3-card-* classes to the
w3-modal-content container:

Open Modal as a Card

Some text..

Animated Modals

Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:

Zoom InTopBottomLeftRightFade In

Some text..

You can also fade in the modal’s background color by setting the
w3-animate-opacity class on the w3-modal element:

Fade in Modal

Modal Image

Click on the image to display it as a modal, in full size:

Modal Image Gallery

Click on an image to display it in full size:

Modal Login Form

This example creates a modal for login:

×
Username
Password
Login
Remember me

Cancel
Forgot password?

Open Login Modal

London

London is the most populous city in the United Kingdom, with a metropolitan area of over
9 million inhabitants.

Paris is the capital of France.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo is the capital of Japan.

Open Tabbed Modal

Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

This example shows how to add an image slideshow inside a modal, to create a «lightbox»:

❮
❯

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции :

$modal = function (options) {
  var
    _elemModal,
    _eventShowModal,
    _eventHideModal,
    _hiding = false,
    _destroyed = false,
    _animationSpeed = 200;

  function _createModal(options) { ... }
  function _showModal() { ... }
  function _hideModal() { ... }
  function _handlerCloseModal(e) { ... }

  _elemModal = _createModal(options || {});
  _elemModal.addEventListener('click', _handlerCloseModal);
  _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
  _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });

  return {
    show: _showModal,
    hide: _hideModal,
    destroy: function () { ... },
    setContent: function (html) { ... },
    setTitle: function (text) { ... }
  }
};

В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции .

В имеются следующие переменные , , , , , и функции , , , .

Функция предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях , то сохраним её в переменную :

_elemModal = _createModal(options || {});

Переменные и применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

document.addEventListener('show.modal', function (e) {
  // в e.detail содержится ссылка на открываемое модальное окно
  ...
});
document.addEventListener('hide.modal', function (e) {
  // в e.detail находится ссылка на корневой DOM-элемент закрываемого модального окна
  ...
});

Переменные и используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение во время скрытия окна, в остальных моментах — . Вторая переменная хранит или , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция предназначена для включения отображения модального окна на странице, а – для его скрытия.

Использование элемента Dialog

появился в HTML5 (в 5.1 если точнее). Он классифицируется как «корневой секционный» элемент, так же как и элементы , и , каждый из которых устанавливает новый независимый блок с контентом. Вы можете разместить его как дочерний к body элемент или же использовать наподобие или – оба этих подхода правильные.

Поддерживающие браузеры (Chrome 37+ и Opera 27+) по умолчанию будут показывать элемент скрытым, делая его видимым при вызове или , а также чтобы снова скрыть его. Как правило, мы будем запускать этот метод при срабатывании события , вот так:

Отличия между методами и

Стоит отметить, что методы и ведут себя по-разному.

Метод открывает диалог в соответствии с его положением внутри DOM. Если вы добавили его непосредственно перед </body>, он появится внизу страницы. Нам пришлось бы добавлять кастомные стили например для позиционирования диалога в центр страницы. Эти стили обычно используют для показа элемента выше других, выставляется свойство в , вместе с и .

Метод напротив покажет элемент как модальное окно. Оно будет отображаться по центру страницы, располагается , который предотвращает наложения применением , относительного позиционирования (relative position) и overflow к родительскому элементу.

В большинстве случаев, вполне вероятно, мы будем использовать вместо метода .

Вкладка режимное

meta http-equiv=»Content-Type» content=»text/html;charset=UTF-8″> ÑÑÐ¾Ð¼ Ð¿ÑÐ¸Ð¼ÐµÑÐµ ÑÐ¾Ð·Ð´Ð°ÐµÑÑÑ Ð¼Ð¾Ð´Ð°Ð»ÑÐ½ÑÐ¼ Ñ Ð²ÐºÐ»Ð°Ð´ÐºÐ°Ð¼Ð¸ ÑÐ¾Ð´ÐµÑÐ¶Ð¸Ð¼ÑÐ¼:

ÐÐ¾Ð½Ð´Ð¾Ð½

Lorem Ipsum Dolor ÑÐ¸Ð´ÐµÑÑ ÐÐ¼ÐµÑ, consectetur adipiscing ÐÐ»Ð¸Ñ, Ð¡ÐÐ Ñ eiusmod Tempor incididunt ÑÑ ÐÐ°Ð±Ð¾ÑÐµ Ð¸ Ð´Ñ Dolore Ð¼Ð°Ð³Ð½Ð° aliqua. Ð£Ñ enim Ð¾Ð±ÑÑÐ²Ð»ÐµÐ½Ð¸Ñ Ð¼Ð¸Ð½Ð¸Ð¼ veniam, Quis nostrud ullamco Laboris ÑÐ¿ÑÐ°Ð¶Ð½ÐµÐ½Ð¸Ðµ ÐÐÐ¡Ð ÑÑ aliquip ÐµÑ ÐµÐ° Commodo consequat.

ÐÐ°ÑÐ¸Ð¶ — ÑÑÐ¾Ð»Ð¸ÑÐ° Ð¤ÑÐ°Ð½ÑÐ¸Ð¸.

Lorem Ipsum Dolor ÑÐ¸Ð´ÐµÑÑ ÐÐ¼ÐµÑ, consectetur adipiscing ÐÐ»Ð¸Ñ.

Ð¢Ð¾ÐºÐ¸Ð¾

ÐÐ°ÐºÑÑÑÑ

Ð¿ÑÐ¸Ð¼ÐµÑ

ÐÑÐºÑÑÑÑ Ð²ÐºÐ»Ð°Ð´ÐºÐ°Ð¼Ð¸ ÑÐµÐ¶Ð¸Ð¼Ð½Ð¾Ðµ

ÐÐ°ÐºÑÐ¾Ð¹ÑÐµ Modal

Ð¿ÑÐ¸Ð¼ÐµÑ

// Get the modalvar modal = document.getElementById(‘id01’);
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {Â Â if (event.target
== modal) {Â Â Â modal.style.display = «none»;
Â Â }}

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Modal As a Card

To display the modal as a card, add one of the w3-card-* classes to the
w3-modal-content container:

Open Modal as a Card

Some text..

Animated Modals

Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:

Zoom InTopBottomLeftRightFade In

Some text..

You can also fade in the modal’s background color by setting the
w3-animate-opacity class on the w3-modal element:

Fade in Modal

Modal Image

Click on the image to display it as a modal, in full size:

Modal Image Gallery

Click on an image to display it in full size:

Modal Login Form

This example creates a modal for login:

×
Username
Password
Login
Remember me

Cancel
Forgot password?

Open Login Modal

London

London is the most populous city in the United Kingdom, with a metropolitan area of over
9 million inhabitants.

Paris is the capital of France.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo is the capital of Japan.

Open Tabbed Modal

Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

This example shows how to add an image slideshow inside a modal, to create a «lightbox»:

❮
❯

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу нужно добавить CSS-свойство со значением . А после скрытия модального окна данное свойство убрать у элемента . Данное действие можно осуществить только с помощью JavaScript: