如何防止angular-ui模式closures?

我在我的项目中使用Angular UI $ modal http://angular-ui.github.io/bootstrap/#/modal

我不希望用户通过按背景来closures模式。 我想要一个模式只能通过按下我已经创build的closuresbutton来closures。

如何防止模式closures?

当你创build你的模态时,你可以指定它的行为:

$modal.open({ // ... other options backdrop : 'static', keyboard : false }); 
 backdrop : 'static' 

将工作“点击”事件,但仍然可以使用“Esc”键closurespopup窗口。

 keyboard :false 

防止popupclosures“Esc”键。

感谢pkozlowski.opensource的答案。

我认为问题是Angular UI Bootstrap Modal的重复- 如何防止用户交互

这是文档中提到的

背景 – 控制背景的存在。 允许的值:true(默认值),false(无背景),'static' – 背景存在,但是在模态窗口之外单击时模态窗口不closures。

static可能工作。

旧的问题,但如果你想添加各种closures操作确认对话框,添加到您的模态实例控制器:

 $scope.$on('modal.closing', function(event, reason, closed) { console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')'); var message = "You are about to leave the edit view. Uncaught reason. Are you sure?"; switch (reason){ // clicked outside case "backdrop click": message = "Any changes will be lost, are you sure?"; break; // cancel button case "cancel": message = "Any changes will be lost, are you sure?"; break; // escape key case "escape key press": message = "Any changes will be lost, are you sure?"; break; } if (!confirm(message)) { event.preventDefault(); } }); 

我的右上angular有一个closuresbutton,触发“取消”操作。 点击背景(如果启用),触发取消操作。 您可以使用它来为各种closures事件使用不同的消息。

对于新版本的ngDialog(0.5.6),请使用:

 closeByEscape : false closeByDocument : false 

全局configuration,

装饰者 ,angular度最好的function之一。 可以“修补”第三方模块。

假设你想在所有的$modal引用中使用这种行为并且你不想改变你的调用,

你可以写一个装饰器 。 这只是增加了选项 – {backdrop:'static', keyboard:false}

 angular.module('ui.bootstrap').config(function ($provide) { $provide.decorator('$modal', function ($delegate) { var open = $delegate.open; $delegate.open = function (options) { options = angular.extend(options || {}, { backdrop: 'static', keyboard: false }); return open(options); }; return $delegate; }) }); 
  • 注意:在最新版本中, $modal重命名为$uibModal

在线演示 – http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview