关闭所有 Angular JS 引导弹出窗口,单击屏幕上的任意位置
Close all Angular JS Bootstrap popovers with click anywhere on screen?
我正在使用 Angular 指令进行引导。
我有一个弹出窗口,如他们的例子所示:
<button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button>
当您再次单击该按钮时,它将关闭。 我想关闭它 - 以及任何其他打开的弹出窗口 - 当用户单击任何地方时。
我没有看到内置的方法可以做到这一点。
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
if(popupElement[0].previousSibling!=e.target){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
正在跟踪此功能请求 (https://github.com/angular-ui/bootstrap/issues/618)。 与 aet 的答案类似,您可以执行功能请求中建议的操作作为解决方法:
$('body').on('click', function (e) {
$('*[popover]').each(function () {
//Only do this for all popovers other than the current one that cause this event
if (!($(this).is(e.target) || $(this).has(e.target).length > 0)
&& $(this).siblings('.popover').length !== 0
&& $(this).siblings('.popover').has(e.target).length === 0)
{
//Remove the popover element from the DOM
$(this).siblings('.popover').remove();
//Set the state of the popover in the scope to reflect this
angular.element(this).scope().tt_isOpen = false;
}
});
});
(来源:Vchatterji在上述功能请求中的评论)
功能请求还有一个非jQuery解决方案以及这个plnkr:http://plnkr.co/edit/fhsy4V
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if (popups) {
for (var i = 0; i < popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
console.log(2);
if (popupElement[0].previousSibling != e.target) {
popupElement.scope().$parent.isOpen = false;
popupElement.scope().$parent.$apply();
}
}
}
});
您所说的这是弹出框的默认设置,但是您可以使用触发器功能对其进行控制,方法是在触发器的第二个参数中放置模糊,如下所示popover-trigger="{mouseenter:blur}"
一个想法是您可以将触发器更改为使用鼠标输入和退出,这将确保一次只显示一个弹出框。下面是一个示例:
<button popover="I appeared on mouse enter!"
popover-trigger="mouseenter" class="btn btn-default"
popover-placement="bottom" >Hello World</button>
你可以看到这在这个 plunker 中工作。您可以在角度引导站点上找到工具提示触发器的完整列表(工具提示和弹出框具有相同的触发器选项)。祝你好运!
有同样的要求,这就是我们的做法:首先,我们在工具提示的链接函数中修改了引导程序:
if (prefix === "popover") {
element.addClass('popover-link');
}
然后,我们在正文上运行一个点击处理程序,如下所示:
$('body').on('click', function(e) {
var clickedOutside = true;
// popover-link comes from our modified ui-bootstrap-tpls
$('.popover-link').each(function() {
if ($(this).is(e.target) || $(this).has(e.target).length) {
clickedOutside = false;
return false;
}
});
if ($('.popover').has(e.target).length) {
clickedOutside = false;
}
if (clickedOutside) {
$('.popover').prev().click();
}
});
我使用相同的代码
angular.element(document.body).popover({
selector: '[rel=popover]',
trigger: "click"
}).on("show.bs.popover", function(e){
angular.element("[rel=popover]").not(e.target).popover("destroy");
angular.element(".popover").remove();
});
谢谢劳伦·坎普雷格尔,这是有效的。
您的代码是唯一同时在作用域上运行状态更改的代码。
仅配置为在单击弹出框时,弹出窗口将关闭。
我已经混合了您的代码,现在如果您在弹出窗口内单击,它也可以工作。
无论是系统,还是通过弹出框模板完成,
为了使它能够识别弹出式模板,我使用了类 popover-body 和 popover-title,对应于使用模板制作的弹出框的标题和正文,并确保它直接指向代码中的位置:
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
var content;
var arrow;
if(popupElement.next()) {
//The following is the content child in the popovers first sibling
// For the classic popover with Angularjs Ui Bootstrap
content = popupElement[0].querySelector('.popover-content');
// For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap
bodytempl = popupElement[0].querySelector('.popover-body');
headertempl= popupElement[0].querySelector('.popover-title');
//The following is the arrow child in the popovers first sibling
// For both cases.
arrow = popupElement[0].querySelector('.arrow');
}
if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
祝你有美好的一天,谢谢劳伦,谢谢AngularJS,非常感谢堆栈家庭!
更新:
我更新了所有添加额外控件的内容。弹出框内的元素已从控件中排除(例如,插入到弹出框正文中的图片)。然后单击相同的关闭。
我曾经解决API Node.contains的命令,集成在一个返回true或false的函数中。
现在,将任何元素放置在内部,运行控件,并在单击内部时保持弹出框打开:
// function for checkparent with Node.contains
function check(parentNode, childNode) { if('contains' in parentNode) { return parentNode.contains(childNode); } else { return parentNode.compareDocumentPosition(childNode) % 16; }}
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
var content;
var arrow;
if(popupElement.next()) {
//The following is the content child in the popovers first sibling
// For the classic popover with Angularjs Ui Bootstrap
content = popupElement[0].querySelector('.popover-content');
// For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap
bodytempl = popupElement[0].querySelector('.popover-body');
headertempl= popupElement[0].querySelector('.popover-title');
//The following is the arrow child in the popovers first sibling
// For both cases.
arrow = popupElement[0].querySelector('.arrow');
}
var checkel= check(content,e.target);
if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl&& checkel == false){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 单击时隐藏弹出窗口
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 试图修改此javascript代码以减小弹出窗口的大小,或者在用户单击框外时关闭
- 在外部(正文)单击时关闭弹出窗口
- 在窗口中单击按钮完成之前,光标不会停止.请继续卸载
- 编辑弹出窗口的HTML的单击命令
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 单击按钮时的窗口属性
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- 打开'选择文件'窗口单击锚链接(跳过单击'选择文件'按钮)
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- 即使我单击“确定”,模型弹出窗口扩展器仍保持打开状态
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何通过单击数据在新窗口上显示TableView数据
- 单击窗口关闭按钮时如何附加事件
- 单击窗口.位置,参数已传递
- 如果锚链接已被单击为在新选项卡中打开,则如何不运行onclick(ctrl并单击窗口)
- 单击窗口时,幻灯片菜单会重新移动
- 单击窗口打开_self