【问题标题】:Bootstrap: Popover dismiss not working in iOS browserBootstrap:Popover 关闭在 iOS 浏览器中不起作用
【发布时间】:2016-11-08 20:05:03
【问题描述】:

我使用了 Bootstrap Popover 并添加了 JS 代码,用于在 body 中点击时关闭 popover。它适用于 Android,但不适用于 iOS。

$(document).ready(function () {
  $("body").tooltip({   
    selector: "[data-toggle='tooltip']",
    container: "body"
  })
  .popover({
    selector: "[data-toggle='popover']",
    container: "body",
    html: true
  });
});

$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    if(!$(this).is(e.target) &&
       $(this).has(e.target).length === 0 &&
       $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
    Click here
  </a>
</div>

【问题讨论】:

    标签: javascript html css iphone twitter-bootstrap


    【解决方案1】:

    得到答案:

    <script>
    $("[data-toggle=popover]")
     .popover({
      html: true
     });
    
    $('a[data-toggle=popover]')
     .popover();
    
    $(':not(#anywhereonthepage)').click(function(e)
    
     {
      e.preventDefault()
    
      $('a[data-toggle=popover]').each(function()
    
       {
    
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('a[data-toggle=popover]').has(e.target).length === 0) {
         $(this).popover('hide');
         return;
        }
       });
     });
    </script>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-04-03
      • 1970-01-01
      • 2019-02-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多