Для создания модального окна с iframe на Bootstrap, вам необходимо использовать компонент "Modal" и добавить в него элемент "iframe".
Первым делом, подключите необходимые библиотеки Bootstrap: CSS и JavaScript. Это можно сделать с помощью вставки соответствующих кодов в тег head вашего HTML-документа:
<head> <!-- Подключение CSS-файла Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Подключение JavaScript-файлов Bootstrap --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head>
Далее, создайте кнопку или элемент, который будет открывать модальное окно:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Открыть модальное окно </button>
Затем, необходимо добавить сам блок модального окна на вашей странице:
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<h4 class="modal-title">Модальное окно с iframe</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Тело модального окна -->
<div class="modal-body">
<iframe src="https://www.example.com" width="100%" height="400"></iframe>
</div>
<!-- Подвал модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
Обратите внимание, что вам необходимо указать ссылку на нужный вам сайт или страницу в атрибуте "src" элемента "iframe". Вы также можете настроить размеры элемента по своему усмотрению.
Последний шаг - настройка скрипта для активации модального окна:
<script>
$(document).ready(function(){
$('#myModal').modal({
show: false
});
});
</script>
Теперь, при клике на кнопку, указанную в атрибуте "data-target", модальное окно будет открываться, отображая в нем указанный сайт или страницу в элементе "iframe".
Обратите внимание, что для работы модального окна необходимо подключение jQuery и Popper.js (необязательно, но используется для обеспечения совместимости некоторых функций в Bootstrap).