我在我的项目中使用Angular UI $ modal http://angular-ui.github.io/bootstrap/#/modal
我不希望用户通过按背景来关闭模态.我想只能通过按下我创建的关闭按钮来关闭模态.
如何阻止模态关闭?
在创建模态时,您可以指定其行为:
$modal.open({ // ... other options backdrop : 'static', keyboard : false });
旧问题,但如果要在各种关闭操作上添加确认对话框,请将其添加到模态实例控制器:
$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(); } });
我的右上角有一个关闭按钮,触发"取消"动作.单击背景(如果已启用),将触发取消操作.您可以使用它为各种关闭事件使用不同的消息.
backdrop : 'static'
将用于"点击"事件,但您仍然可以使用"Esc"键关闭弹出窗口.
keyboard :false
防止弹出关闭"Esc"键.
感谢pkozlowski.opensource的回答.
我认为问题是Angular UI Bootstrap Modal的复制 - 如何防止用户交互
装饰者,角度最好的功能之一.能够 "修补"第三方模块.
假设您希望在所有$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
对于新版本的ngDialog(0.5.6),请使用:
closeByEscape : false closeByDocument : false
这是文档中提到的内容
背景 - 控制背景的存在.允许值:true(默认值),false(无背景),'static' - 背景存在但模式窗口在模态窗口外单击时未关闭.
static
可以工作.