如何防止angular-ui模态关闭?

 猴三爷22_394 发布于 2023-02-13 19:21

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

我不希望用户通过按背景来关闭模态.我想只能通过按下我创建的关闭按钮来关闭模态.

如何阻止模态关闭?

6 个回答
  • 在创建模态时,您可以指定其行为:

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

    2023-02-13 19:22 回答
  • 旧问题,但如果要在各种关闭操作上添加确认对话框,请将其添加到模态实例控制器:

    $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();
        }
    });
    

    我的右上角有一个关闭按钮,触发"取消"动作.单击背景(如果已启用),将触发取消操作.您可以使用它为各种关闭事件使用不同的消息.

    2023-02-13 19:23 回答
  • backdrop : 'static'
    

    将用于"点击"事件,但您仍然可以使用"Esc"键关闭弹出窗口.

    keyboard :false
    

    防止弹出关闭"Esc"键.

    感谢pkozlowski.opensource的回答.

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

    2023-02-13 19:23 回答
  • 全局配置,

    装饰者,角度最好的功能之一.能够 "修补"第三方模块.

    假设您希望在所有$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

    2023-02-13 19:23 回答
  • 对于新版本的ngDialog(0.5.6),请使用:

    closeByEscape : false
    closeByDocument : false
    

    2023-02-13 19:25 回答
  • 这是文档中提到的内容

    背景 - 控制背景的存在.允许值:true(默认值),false(无背景),'static' - 背景存在但模式窗口在模态窗口外单击时未关闭.

    static 可以工作.

    2023-02-13 19:28 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有