[英]How to prevent the popover div for hiding on clicking inside it for twitter bootstrap “dismissible popover”(data-trigger=“focus”)?
[英]Bootstrap3 popover data-trigger=focus closing popup when clicking on <select> input within popup
我正在使用引导程序弹出窗口,并且在弹出窗口内有一个<select>
字段,以便用户更改语言。
如果他们在弹出窗口外单击,我希望它消失,因此我正在使用<a>
标记内的data-trigger="focus"
属性来完成此操作。
但是,如果他们单击<select>
下拉菜单,则弹出窗口会消失,然后他们才能单击语言。
以下是供您参考的引导程序-非常感谢您的帮助。
http://www.bootply.com/SEM4ophIhx
Javascript:
$(function () {
$('[data-toggle="popover"]').popover()
})
$(function () {
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function (e) {
e.preventDefault();
});
});
HTML:
<a href="#" role="button" data-placement="right" data-trigger="focus" rel="popover" data-popover-content="#profilesettingsaction">
<span class="glyphicon glyphicon-cog"></span>
</a>
<div id="profilesettingsaction" class="hide">
<ul>
<li>
<select name="language">
<option value="">العربية: الإمارات العربية المتحدة</option>
<option value="">中国</option>
<option value="">中國</option>
<option value="">Nederlands: Nederland</option>
<option value="">English: United Kingdom</option>
<option value="" selected="">Language: English</option>
<option value="">Français: France</option>
<option value="">Italiano: l'Italia</option>
<option value="">日本語:日本</option>
<option value="">Português: Portugal</option>
<option value="">Español: México</option>
</select>
</li>
</ul>
</div>
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
您只需捕获身体上的点击事件,然后检查目标是否为弹出窗口的子对象。 但是,这确实很慢。
我相信您误用了属性数据触发,应该指定点击,而不是焦点。
它在这里工作: http : //www.bootply.com/5gXiitMup1
我添加了代码,以在选择语言时处理弹出窗口关闭。
希望它是有用的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.