Для открытия модального окна Bootstrap при наведении мы можем использовать JavaScript события и методы. Вот пример подробного кода, который позволит вам достичь этой функциональности.
HTML:
<button id="myButton" class="btn btn-primary">Открыть модальное окно</button> <!-- Модальное окно --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Модальное окно Bootstrap</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Содержимое модального окна</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить изменения</button> </div> </div> </div> </div>
JavaScript:
// Получаем ссылку на кнопку открытия модального окна var button = document.getElementById("myButton"); // Получаем ссылку на модальное окно var modal = document.getElementById("myModal"); // Добавляем обработчик события наведения на кнопку button.addEventListener("mouseover", function() { // Открыть модальное окно modal.style.display = "block"; }); // Добавляем обработчик события ухода курсора с кнопки button.addEventListener("mouseout", function() { // Закрыть модальное окно modal.style.display = "none"; });
В этом примере мы сначала получаем ссылки на кнопку открытия модального окна и само модальное окно с помощью метода getElementById
. Затем мы добавляем обработчики событий mouseover
(наведение курсора на кнопку) и mouseout
(уход курсора с кнопки) для кнопки.
Внутри каждого обработчика события мы изменяем свойство display
модального окна на "block"
, чтобы показать его, или "none"
, чтобы скрыть его.
С помощью этого кода мы можем открыть модальное окно Bootstrap при наведении на кнопку и закрыть его при уходе курсора с кнопки. Вы можете настроить этот пример, чтобы он соответствовал вашим требованиям и стилям.