Как открыть модальное окно bootstrap при навидению?
Всем привет не могу найти как через скрипты реализовать, открывать модальное окно bootstrap при навидению и только один раз в два дня.
Может тут помогут примерами как реализовать это, заранее спасибо.
Вот пытался реализовать таким способом, но не могу понять как при навидению чтоб работало (
<script type="text/javascript"> // MODAL COOKIE FOR 2 DAYS $(function() { if($.cookie('alreadyShow') === null) { // MODAL APPEAR AFTER 2 SECONDS setTimeout(function() { $('#newsletter-modal').modal(); }, 2000); $.cookie('alreadyShow', true, {expires: 2}); $('#newsletter-modal').modal({ display: 'block' }); } }); </script> |
<script type="text/javascript"> // MODAL COOKIE FOR 2 DAYS $(function() { if($.cookie('alreadyShow') === null) { // MODAL APPEAR AFTER 2 SECONDS setTimeout(function() { $('#newsletter-modal').modal(); }, 2000); $.cookie('alreadyShow', true, {expires: 2}); $('#newsletter-modal').modal({ display: 'block' }); } }); </script>
Дополнительно:
Ответы:
<input type='hidden' id='open-modal' data-toggle='#modal' data-target='#modal-id' /> |
<input type='hidden' id='open-modal' data-toggle='#modal' data-target='#modal-id' />
let isOpen = false; $('#item-to-open-modal').on('mouseenter', () => { if (!isOpen) { document.getElementById('open-modal').click() isOpen = true; } }) $('#item-to-open-modal').on('mouseleave', () => { if (isOpen) { document.getElementById('close-modal').click() isOpen = false } }) |
let isOpen = false; $('#item-to-open-modal').on('mouseenter', () => { if (!isOpen) { document.getElementById('open-modal').click() isOpen = true; } }) $('#item-to-open-modal').on('mouseleave', () => { if (isOpen) { document.getElementById('close-modal').click() isOpen = false } })
- Интересный пример хмм if можно засунуть куки условие верно понимаю для проверке, если куки на водил, то не открывает верно понимаю?
- Марат Агатов, я ничего не понял с того, что вы справили, но допустим да
- Nik Faraday, смотрите задача такая заходит человек на сайт навёл допутим на картинку с товаром появилось модальное окно, и когда переходит по страница или заходит заново не должна открываться снова модальное окно при навидение на эту картинку и толкьо тогда открывается когда проходит 2 дня.
- Марат Агатов, ну я вам не решу вашу задачу полностью, это вам на фриланс нужно идти. Я дал вам ответ на тот вопрос, что вы спрашивали
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы открыть модальное окно Bootstrap при наведении курсора, вам нужно использовать JavaScript вместе с CSS. Вот пример кода, который покажет вам, как это сделать:
1. Сначала вам нужно добавить модальное окно в HTML код вашей страницы:
```html
Модальное окно
```
2. Теперь вам нужно добавить JavaScript код, который будет открывать модальное окно при наведении курсора:
```html
$(document).ready(function(){
$('#myElement').hover(function(){
$('#myModal').modal('show');
}, function(){
$('#myModal').modal('hide');
});
});
```
3. Не забудьте добавить ссылку на библиотеку jQuery и Bootstrap в ваш HTML код:
```html
```
4. Наконец, добавьте элемент, на который будет привязано модальное окно:
```html
```
Теперь при наведении курсора на элемент с id "myElement" модальное окно будет открываться, а при убирании курсора - закрываться. Не забудьте подключить все необходимые стили и скрипты Bootstrap для корректной работы модального окна.