Для реализации открытия модального окна Bootstrap при наведении мы можем использовать JavaScript (или jQuery, если он подключен, потому что Bootstrap до версии 5 использует jQuery для манипуляции с DOM). В вашем случае нам также понадобится учет времени, чтобы модальное окно открывалось один раз в течение двух дней.
Вот пример реализации на JavaScript:
HTML:
```html
<!-- Триггер (например, ссылка) для отображения модального окна -->
<a href="#" id="modal-trigger">Наведите на меня курсор</a>
<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Содержимое модального окна... -->
</div>
```
JavaScript:
```js
document.addEventListener('DOMContentLoaded', (event) => {
const modalTrigger = document.getElementById('modal-trigger');
const modal = new bootstrap.Modal(document.getElementById('myModal')); // Bootstrap 5, для Bootstrap 4 используйте $('#myModal').modal()
// Функция для проверки, когда последний раз открывалось модальное окно
function canShowModal() {
const lastModalOpenTime = localStorage.getItem('lastModalOpenTime');
if (!lastModalOpenTime) {
return true;
}
const twoDays = 48 * 60 * 60 * 1000; // 48 часов в миллисекундах
return new Date() - new Date(lastModalOpenTime) > twoDays;
}
// Сохранение времени открытия модального окна
function saveModalOpenTime() {
localStorage.setItem('lastModalOpenTime', new Date().toISOString());
}
modalTrigger.addEventListener('mouseenter', (e) => {
if (canShowModal()) {
modal.show();
saveModalOpenTime();
}
});
});
```
В данном коде мы используем localStorage для хранения времени последнего открытия модального окна. Когда пользователь наводит курсор на элемент с `id="modal-trigger"`, мы проверяем достаточно ли времени прошло с момента последнего открытия. Если условие выполняется (то есть прошло больше 48 часов), модальное окно открывается, и время открытия сохраняется в localStorage.
Этот код предполагает, что у вас уже подключен Bootstrap и его JavaScript-компоненты. Также важно правильно инициализировать экземпляр модального окна для вашей версии Bootstrap (`bootstrap.Modal` для Bootstrap 5 или `$('#myModal').modal()` для Bootstrap 4).