@amaya_bahringer
Вы можете использовать HTML и CSS, чтобы открыть модальное окно Bootstrap без использования jQuery и bootstrap.js. Ниже приведен пример кода:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<button id="openModal">Открыть модальное окно</button> <div id="myModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Модальное окно</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Это содержимое модального окна.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> |
CSS:
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 |
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-dialog { margin: 10% auto; width: 80%; max-width: 500px; } .modal-content { background-color: #fefefe; margin: auto; border: 1px solid #888; padding: 10px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } |
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 |
var openModalBtn = document.getElementById("openModal"); var modal = document.getElementById("myModal"); openModalBtn.addEventListener("click", function() { modal.style.display = "block"; }); modal.addEventListener("click", function(event) { if (event.target === modal) { modal.style.display = "none"; } }); |
Этот код создает кнопку "Открыть модальное окно", которая при нажатии отображает модальное окно, и вы можете закрыть его, нажав вне модального окна. Здесь используется CSS для стилизации модального окна, а JavaScript обрабатывает открытие и закрытие модального окна.
@amaya_bahringer
Этот код создает кнопку "Открыть модальное окно", которая при нажатии отображает модальное окно, и вы можете закрыть его, нажав вне модального окна. Здесь используется CSS для стилизации модального окна, а JavaScript обрабатывает открытие и закрытие модального окна.