11

我有一个可关闭的弹出框（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/

我无能为力..请帮助..提前谢谢。

4

4 回答 4

9

单击弹出框会隐藏该弹出框，因为它们正在窃取浏览器的焦点。一旦按钮失去焦点，弹出框就会被隐藏（因为我们已经设置了data-trigger="focus"）。

要解决您提出的确切问题：

防止弹出 div 隐藏在里面点击 twitter bootstrap “dismissible popover”（data-trigger=“focus”）？

解决此问题的最简单方法是通过以下方式防止弹出框内的点击窃取焦点：

  • 添加事件侦听器以捕获弹出框内的点击
  • 调用preventDefault()捕获的事件

这将阻止焦点被盗，从而阻止弹出框被关闭。

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

关于我们为什么使用的更深入的解释，mousedown可以preventDefault()在这个 StackOverflow 答案中找到： 防止点击 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>

于 2018-02-28T09:22:33.970 回答
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>'
    });
});
于 2014-12-25T22:21:11.867 回答
1

此代码适用于我，您可以通过调用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();
        }
    });
于 2020-09-30T15:51:38.130 回答
0

代替

data-trigger="focus"

你应该使用

data-trigger="'focus'"

适用于 AngularUI Bootstrap 2.0 及更高版本。

于 2017-02-22T05:47:33.090 回答