bootstrap popover wont close in mobile

Я упростил свой html коду, который я размещаю здесь. Сначала у меня пустой p-тег. Затем табличный тег, содержащий привязку к popover. А затем еще один пустой p-тег. Когда я нахожусь на Рабочем столе, после того, как я нажимаю на якорь и всплывающие окна, везде, где я нажимаю на эту страницу, popover будет закрыт. Однако, когда я нахожусь на мобильных устройствах (Safari iOS), popover будет закрываться только в том случае, если я нажму кнопку/коснитесь в конце страницы. Это означает, что область после последнего пустого p-тега. Я много исследовал. Я не уверен, но, может быть, может быть о прослушивании «нажмите» вместо «щелчка»? То, что я действительно не понимаю, - это то, почему клики за пределами тегов внутри тела заставляют popover исчезать.bootstrap popover wont close in mobile

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> 
<link href="/components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet"> 
<script type="text/javascript" src="/components/jquery/dist/jquery.js">  </script>  
<script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script> 
<script> 
$(function() { 
$('[data-toggle="popover"]') 
.on('click',function(e){ 
e.preventDefault(); 
}) 
.popover(); 
}) 
</script> 
</head> 
<body> 
<p style="background-color:green">&nbsp;</p> 
<table border=1 cellspacing=2 cellpadding=2 > 
    <tr> 
     <td><b>Lowest</b></td> 
    </tr> 
    <tr> 
     <td> 
      <a 
       data-html="true" data-trigger="focus" tabindex="0" role="button" href="#" data-toggle="popover" data-placement="right" 
       data-content="<div>This is HTML</div>"> 
        one 
      </a> 
     </td> 
    </tr> 
</table> 
<p style="background-color:yellow">&nbsp;</p> 
</body> 
</html>

источник

2015-06-14 user1963937

Проблема в том, что на Iphone onclick на элемент кузова не работает. Попробуйте код простой html-страницы, где у вас есть этот код: $ (function() {$ ('body'). On ('click touchstart', function (e) { alert ("clicked"); }); }); Ну, на Iphone не будет никаких предупреждений. Так что, сосредоточив внимание на этом, я обнаружил, что для этого есть несколько обходных решений. Обходное решение - иметь директиву css для элемента, который вы хотите кликать (в моем случае все теги body, поэтому в этом случае вы можете поместить некоторую оболочку, которая будет envolping всем содержимым тела). Директива проста: курсор: указатель;

Поскольку вы, вероятно, не хотите, чтобы все элементы отображали указатель, вам, вероятно, потребуется определить, был ли клиент iOS.

источник

2015-06-14 17:56:49 user1963937

На самом деле вы можете поместить курсор: указатель внутри тела. Протестировано и работает. Попапер исчезает, когда касается где-то на странице. – user1963937

bootstrap popover wont close in mobile

ответ

Смежные вопросы