如何防止点击 Twitter Bootstrap“可消除弹出框”（data-trigger="focus"）内部时隐藏弹出框？

Question

如何防止点击 Twitter Bootstrap“可消除弹出框”（data-trigger="focus"）内部时隐藏弹出框？

javascriptjqueryhtmltwitter-bootstrapbootstrap-popover

12

我有一个带有文本框的可关闭弹出窗口（data-trigger="focus"），但是当我点击文本框开始输入时，它会因为"data-trigger="focus""而消失。我该如何让div在其中点击时智能地不消失？以下是我的html代码：

  <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head>
<body><div><a class="BookAppButton" href="" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="focus">Click Here</a></div></body>

这是我的 jQuery 代码：

    $(document).ready(function(){
$('.BookAppButton').click(function(event){
    event.preventDefault();
    console.log("Button Clicked..");
});
$('.BookAppButton').popover({
        title : '',
        html : 'true',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

这是我的 jsfiddle 链接: http://jsfiddle.net/3g3o4xhw/

我已经束手无策了...请帮帮我...提前谢谢。

- Rohit Rane

4个回答

2

这段代码对我有效，你可以在任何条件下调用preventDefault()方法来关闭弹出窗口。

var closePopOver=true;
    $('[data-toggle="popover"]').popover({
        html: true,
        title: '',
        content: function () {
            return 'Your Html Here';
        }
    }).on('hide.bs.popover', function (hideEvent) {
        if (!closePopOver) {
            hideEvent.preventDefault();
        }
    });

- Mahmoud-Abdelslam

1

您应该使用 tigger: 'click'。

$('.BookAppButton').popover({
        title : '',
        html : 'true',
    trigger: 'click',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

- user2598812

0

不是

data-trigger="focus"

你应该使用

data-trigger="'focus'"

适用于AngularUI Bootstrap 2.0及以上版本。

- downhand

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- samjewell · Accepted Answer

单击弹出框会隐藏该弹出框，因为它们正在窃取浏览器的焦点。只要按钮失去焦点，弹出窗口就会被隐藏（因为我们已经设置了 data-trigger="focus" ）。 回答您所提出的确切问题： 防止 Twitter Bootstrap“可取消弹出框”（data-trigger=“focus”）中单击内部内容时弹出框隐藏？

最简单的方法是通过以下方式防止在弹出窗口内部单击时窃取焦点：

添加事件侦听器以捕获弹出窗口内的单击事件
对捕获的事件调用 preventDefault()

这将停止焦点被窃取，并因此停止弹出框被关闭。

注意：我们需要在 mousedown 上添加事件监听器而不是 click，因为那时浏览器设置了焦点。

更深入的关于为什么使用 mousedown 和 preventDefault() 的解释可以在 StackOverflow 回答中找到：Prevent firing focus event when clicking on div。

$(function() {
  $('[data-toggle="popover"]').popover()
})

$('body')
  .on('mousedown', '.popover', function(e) {
    console.log("clicked inside popover")
    e.preventDefault()
  });

<html>

<body>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible" data-content="Clicks in here won't steal focus">
    Dismissible popover
  </a>
</body>
</html>