本文介绍了显示一个弹出框并隐藏其他弹出框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有几个按钮,每个按钮我都需要一个弹出框.
我想要这样:
当我的用户单击其中一个时,我希望隐藏其他人.所以只显示一个弹出框
请检查并帮助我更正此示例:
var mycontent='<div class="btn-group"><button class="btn">左</button><button class="btn">Middle</button><button class="btn">右</button>
'
$('.btn').popover({html:对,内容:我的内容,触发器:'手动'}).点击(功能(e){$(this).popover('toggle');e.stopPropagation();});$('html').click(function(e) {$('.btn').popover('隐藏');});
我的 html:
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a><li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
jsfiddle 示例
添加类似下面的代码以某种方式解决了我的问题:
$('.btn').click(function(e) {$('.btn').popover('隐藏');});
但是在每个按钮上点击两次就会出错
解决方案
我以某种方式创建了一个示例来满足我的需要.我使用了这个代码:
$('.btn').popover();$('.btn').on('click', function (e) {$('.btn').not(this).popover('hide');});
在此处查看演示
并更正了之前的演示我希望它能帮助别人
i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is shown
check and help me correcting this example plz:
var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'
$('.btn').popover({
html: true,
content:mycontent,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
$('html').click(function(e) {
$('.btn').popover('hide');
});
my html:
<ul>
<li>
<a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
</li>
<li>
<a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
</li>
</ul>
jsfiddle example
adding something like the code bellow solved my problem somehow:
$('.btn').click(function(e) {
$('.btn').popover('hide');
});
but by clicking twice on each button it goes wrong
解决方案
somehow i created one example for my need. i used this code:
$('.btn').popover();
$('.btn').on('click', function (e) {
$('.btn').not(this).popover('hide');
});
check the demo here
and corrected the previous demoi hope it will help someone else
这篇关于显示一个弹出框并隐藏其他弹出框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!