我有一个简单的项目列表 - 每个项目都有一个带有引导弹出窗口的按钮。
1/我想确保一次只打开一个弹出窗口 - 目前我可以单击每个按钮并有多个打开/重叠的弹出窗口。
2/单击按钮外部时 - 当前打开的弹出窗口应关闭。
此处的 fiddle 示例:
var app = angular.module("app", []);
app.controller('my_controller', function($scope) {
$scope.all_countries = [{"id":28,"title":"Sweden"}, {"id":56,"title":"USA"}, {"id":89,"title":"England"}];
});
app.directive('bsPopover', function() {
return function(scope, element, attrs) {
element.find("a[rel=popover]").popover({ placement: 'bottom', html: 'true'});
};
});
最佳答案
遗憾的是,没有任何内置功能,比如具有某些行为的弹出窗口组。相反,您必须自己实现它。
如果你看一下Bootstrap Docs on Popovers您会发现许多对 Popover 有用的方法和事件。
在您的情况下,只需添加一个事件处理程序来监听“show”事件何时被触发并关闭任何其他弹出窗口即可。我只在 Fiddle 中添加了三行来执行此操作。
element.find("a[rel=popover]").on('show.bs.popover', function () {
$('a[rel=popover]').popover('hide');
});
请注意,我使用的是“show”事件,而不是“shown”事件。如果我在显示我刚刚选择的弹出窗口后在哪里关闭所有弹出窗口,它将关闭所有弹出窗口,包括我刚刚打开的弹出窗口。
关于javascript - AngularJS 弹出窗口 - 点击主体时隐藏(内部 fiddle ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25519697/