单击弹出触发器元素时

单击弹出触发器元素时

本文介绍了单击弹出触发器元素时,如何关闭/关闭Bootstrap Popover?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

jsFiddle:



这是什么作品:


  1. 点击按钮打开popover

  2. 点击popover外面的pop关闭

  3. 单击关闭弹出窗口.close 按钮

但是......再次单击原始按钮时,我无法关闭弹出窗口。相反,弹出窗口会再次闪烁。



自己复制。



我该如何做到这一点?



HTML:

 < button id =popoverIdclass =popoverThis btn btn-large btn-danger >点击以切换popover< / button> 
< div id =popoverContentclass =hide>此< em> rich< / em> <预> HTML< /预>内容进入popover< / div>

JS:

  $('#popoverId')。popover({
html:true,
title:Popover Title,
content:function( ){
返回$('#popoverContent')。html();
}
});


var isVisible = false;
var clickedAway = false;

$('。popoverThis')。popover({
html:true,
trigger:'manual'
})。click(function(e){
$(this).popover('show');
$('。popover-content')。append('< a class =closestyle =position:absolute; top: 0;右:6px;>& times;< / a>');
clickedAway = false
isVisible = true
e.preventDefault()
}) ;

$(document).click(function(e){
if(isVisible& clickedAway){
$('。popoverThis')。popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});


解决方案

你想要这样的工作吗?



http://jsfiddle.net/kAYyR/3/

  $('#popoverId')。popover({
html:true,
title: 'Popover Title< a class =closehref =#);>& times;< / a>',
content:$('#popoverContent')。html(),
});

$('#popoverId')。click(function(e){
e.stopPropagation();
});

$(document).click(function(e){
if(($('。popover')。has(e.target).length == 0)|| $(e.target ).is('。close')){
$('#popoverId')。popover('hide');
}
});


jsFiddle: http://jsfiddle.net/kAYyR/

Screenshot:

Here's what works:

  1. Open popover on button click
  2. Close popover on click outside popover
  3. Close popover on click of .close button

BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.

Duplicate it yourself here.

How can I accomplish this?

HTML:

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>

JS:

$('#popoverId').popover({
    html: true,
    title: "Popover Title",
    content: function () {
        return $('#popoverContent').html();
    }
});


var isVisible = false;
var clickedAway = false;

$('.popoverThis').popover({
    html: true,
    trigger: 'manual'
}).click(function (e) {
    $(this).popover('show');
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>');
    clickedAway = false
    isVisible = true
    e.preventDefault()
});

$(document).click(function (e) {
    if (isVisible & clickedAway) {
        $('.popoverThis').popover('hide')
        isVisible = clickedAway = false
    } else {
        clickedAway = true
    }
});
解决方案

Do you want work like this ?

http://jsfiddle.net/kAYyR/3/

$('#popoverId').popover({
    html: true,
    title: 'Popover Title<a class="close" href="#");">&times;</a>',
    content: $('#popoverContent').html(),
});

$('#popoverId').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('#popoverId').popover('hide');
    }
});

这篇关于单击弹出触发器元素时,如何关闭/关闭Bootstrap Popover?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 20:54