Блог

Главная - Вопросы по программированию - содержимое всплывающего окна начальной загрузки не должно скрываться, когда пользователь фокусируется на всплывающем содержимом

содержимое всплывающего окна начальной загрузки не должно скрываться, когда пользователь фокусируется на всплывающем содержимом

#html #jquery #css #bootstrap-4

Вопрос:

Я реализовал отображение всплывающего окна при наведении курсора мыши на кнопку. Когда пользователь фокусируется на содержимом, всплывающее содержимое скрывается. Я реализовал приведенный ниже код. Я не должен скрывать всплывающее содержимое, когда пользователь фокусируется на контенте, может кто-нибудь предложить

 $(function() {
  $('[data-toggle="popover"]').popover({
    trigger: 'hover focus',
    placement: 'bottom',
    content: "And here's some amazing content. It's very engaging. Right?",
    title: "Popover title",
    html: true,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
  })
})

Спасибо

Ответ №1:

 <html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>

<body>

<a class="btn btn-sm btn-dark notice-pop" data-trigger="click" data-hideclickout="true" href="javascript:;">Test Button</a>

<script>
    $('.notice-pop').popover({
        content:"Some Popover Content",
    });
    
    $('body').on('click', function (e) {
        $('[data-hideclickout="true"][aria-describedby]').each(function () {
            if (!$(this).is(e.target) amp;amp; $(this).has(e.target).length === 0 amp;amp; $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });
    
</script>
</body>
</html>

Доступно много других конфигураций. Проверьте документацию.

Я добавил пользовательскую опцию data-hideclickout="true для элемента, который я хочу скрыть при щелчке снаружи.

Метки: ,