Руководство Popover Закрыть при щелчке снаружи: в Safari не работает - PullRequest
Новая
       27

Руководство Popover Закрыть при щелчке снаружи: в Safari не работает

0 голосов
/ 27 сентября 2018

JSFiddle: http://jsfiddle.net/L4tjpsbn/

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

Работает везде, кроме Safari.В Safari на ноутбуке Mac, когда поповер открыт, я не могу закрыть его внешним щелчком.Я могу закрыть его, только нажав кнопку источника еще раз.

Есть мысли? 

// Initialize Button popover, whose contents comes from a DIV
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Button popover: dismiss on (1) Outside click as well as (2) next Button click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

1 Ответ

0 голосов
/ 28 сентября 2018

Вы должны немного изменить свою разметку, поскольку в документации написано здесь , вы можете выполнить поиск «Специальная разметка, необходимая для dismiss-on-next-click», и там вы найдете информацию, в основном у вас естьизменить <button> на <a>, и вы также должны включить атрибуты role="button" и tabindex.

Это мой пример, протестированный в Safari: http://jsfiddle.net/checosele/e3xtvq2y/

// Initialize Delegator Info Button popover (may not be applicable)
$('#delegatorInfoButton').popover({
    trigger: 'manual',
    html: true,
    title: '<span style="font-weight: bold;">TITLE</span>',
    content: function() {
        return $('#delegatorInfoButtonPanel').html();
    }
});
// Manual handling of Delegator Info Button popover: dismiss on focus events as well as next source-icon click
$('#delegatorInfoButton').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

И это HTML: 

<a role="button" id="delegatorInfoButton" type="button" class="btn btn-primary elo" data-toggle="popover" data-placement="right" tabindex="0">
  Open Popover
</a>

<!-- Delegator Info Button Content Panel: Initially empty, will be populated after Ajax fetch upon selection -->
<div id="delegatorInfoButtonPanel" style="display: none">
  CONTENT HERE
</div>
...