Bootstrap popover 关闭功能在 iphone 中不起作用

Posted

技术标签:

【中文标题】Bootstrap popover 关闭功能在 iphone 中不起作用【英文标题】:Bootstrap popover dismiss function not working in iphone 【发布时间】:2016-11-22 09:15:35 【问题描述】:

有两个按钮“按钮 1”用于显示弹出框,“按钮 2”用于外部链接。为“按钮 1”添加了一些自定义 jquery,以当我们点击身体上的任何位置时关闭弹出框,但它在 iPhone 上不起作用(仅在点击同一个按钮时才会关闭在 iPhone 中)

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

    $('body').on('click', function (e) 
        $('a[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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <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=""> Button1 </a> 
  <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a> </div>

【问题讨论】:

【参考方案1】:

“body”标签在 iphone 上不起作用,我在 body 中添加了一个类。现在它的工作:

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

    $('.bodyClass').on('click', function (e) 
        $('a[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');
            
        );
    );

【讨论】:

以上是关于Bootstrap popover 关闭功能在 iphone 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap 的弹出窗口中插入关闭按钮

如何在 Bootstrap 4 popover 事件中获取数据属性

使用 bootstrap 3 popover 内表未显示在按钮顶部

如何在 Angular2 中使用 Bootstrap Popover

无法关闭 Popover UITableViewController

bootstrap 中的popover放在input上怎么使用