Создание всплывающего окна (popap) в Bootstrap4

Сегодня 1 марта!
Всех жителей интернета с началом Весны!

И так, делаем всплывающее окно в Ботстрап4.- идём на сайт https://bootstrap-4.ru/
— скопироуем там уже готовый шаблон с html кодом
— создаём в блокноте новый документс расшрением index.html
— а лучше , конечно, в каком нибудь редакторе кода типа
sablaim text или vscode (в написании могу ошибаться)
— вставляем этот код в созданный индексный файл
это у нас и будет основная страница сайта
— затем там же берём код кнопки всплывающего окна
и самого окна
— вставляем этот код в нашу страницу сайта между тегами
<body></body>
— и все дела , кнопка есть, всплывающее окно — есть

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

Почему я выбрал этот вариант?
А потому, что в этом случае меньше вероятность ошибки, типа не то
взял , не туда поставил!

Так выглядит код шаблона html страницы c кодом

<!doctype html>
<html lang=»en»>
<head>
<!— Required meta tags —>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>

<!— Bootstrap CSS —>
<link href=»https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css
/bootstrap.min.css» rel=»stylesheet» integrity=»sha384-giJF6kkoqNQ00vy+HMDP7
azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1″ crossorigin=»anonymous»>

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!— Optional JavaScript; choose one of the two! —>

<!— Option 1: Bootstrap Bundle with Popper —>
<script src=»https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.
bundle.min.js» integrity=»sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf
80OJFdroafW» crossorigin=»anonymous»></script>

<!— Option 2: Separate Popper and Bootstrap JS —>
<!—
<script src=»https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js»
integrity=»sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU» crossorigin=»anonymous»></script>
<script src=»https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.
js» integrity=»sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj» crossorigin=»anonymous»></script>
—>
</body>
</html>

Так выглядит код кнопки и самого всплывающего окна.

<!— Button trigger modal —>
<button type=»button» class=»btn btn-primary» data-bs-toggle=»modal» data-bs-target=»#exampleModal»>
Launch demo modal
</button>

<!— Modal —>
<div class=»modal fade» id=»exampleModal» tabindex=»-1″ aria-labelledby=»exampleModalLabel» aria-hidden=»true»>
<div class=»modal-dialog»>
<div class=»modal-content»>
<div class=»modal-header»>
<h5 class=»modal-title» id=»exampleModalLabel»>Modal title</h5>
<button type=»button» class=»btn-close» data-bs-dismiss=»modal» aria-label=»Close»></button>
</div>
<div class=»modal-body»>

</div>
<div class=»modal-footer»>
<button type=»button» class=»btn btn-secondary» data-bs-dismiss=»modal»>Close</button>
<button type=»button» class=»btn btn-primary»>Save changes</button>
</div>
</div>
</div>
</div>

В Документации Ботстрапа всё есть, надо лишь найти то ,что нужно , скопировать
и вставить куда нужно.И всё будет работать!
Вот и всё! У нас есть всплывающее окно -это круто!
Осталось ещё разобраться , как туда смонтировать форму
обратной связи.
А это , друзья мои, уже вообще здорово будет.
Так как в интернете много есть мест, где это очень требуется сделать
И за это платят неплохие деньги!
Например, на бирже кворк.ру , где я уже начал зарабатывать первые деньги.
Вот мой профиль , кому интересно!
https://kwork.ru/user/svim09

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

Возможно Вам будет интересно!
Мои бесплатные подписные страницы!

Набор для создания подписной страницы
https://s3.kruglovo.ru/nabor_dly_podp/

Комплект для Начинающего
Всё бесплатно:
-Конструктор сайтов
-Рассыльщик писем
-Хостинг

http://www.s4.kruglovo.ru/dly-nachinayschego24/

Спасибо ,что дочитали до конца.
До следующих встреч!
С уважением Иван С.