web-dev-qa-db-ja.com

角度UIモーダルが閉じないようにするにはどうすればよいですか？

私は私のプロジェクトでAngular UI $ modalを使用しています http://angular-ui.github.io/bootstrap/#/modal

ユーザーが背景を押してモーダルを閉じないようにします。モーダルは、作成した閉じるボタンを押すことによってのみ閉じることができます。

モーダルが閉じないようにするにはどうすればよいですか？

angularjsangular-uiangularjs-service
82
Rahul Prasad

モーダルの作成中に、その動作を指定できます。

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

「クリック」イベントでも機能しますが、「Esc」キーを使用してポップアップを閉じることができます。

keyboard :false

「Esc」キーでポップアップが閉じないようにします。

Pkozlowski.opensourceの回答に感謝します。

質問は Angular UI Bootstrap Modal-ユーザーの操作を防ぐ方法 と重複していると思います

31
Sachin G.

古い質問ですが、さまざまな閉じるアクションで確認ダイアログを追加する場合は、これをモーダルインスタンスコントローラーに追加します。

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

私の右上に閉じるボタンがあり、「キャンセル」アクションをトリガーします。背景（有効になっている場合）をクリックすると、キャンセルアクションがトリガーされます。これを使用して、さまざまな終了イベントに異なるメッセージを使用できます。

21
Tiago

これはドキュメントに記載されているものです

backdrop-背景の存在を制御します。許可される値：true（デフォルト）、false（背景なし）、 'static'-背景は存在しますが、モーダルウィンドウの外側をクリックしてもモーダルウィンドウは閉じられません。

staticは機能する可能性があります。

12
Chandermani

グローバルに設定し、

decorator 、角度の最高の機能の1つ。サードパーティのモジュールを "patch"する機能を提供します。

この動作が必要だとしましょうすべての$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

8
Jossef Harush

ngDialogの新しいバージョン（0.5.6）の場合：

closeByEscape : false
closeByDocument : false
5
Ben Cohen