どうすればangular-uiモーダルが閉じないようにできますか?


86

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

ユーザーが背景を押してモーダルを閉じてほしくない。作成した閉じるボタンを押すだけでモーダルを閉じることができます。

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

回答:


193

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

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

2
はい、これは正解です:)共有していただきありがとうございます!
スカイウォーカー2015年

涼しい!共有していただきありがとうございます。+1
Khanh Tran

10
これらを動的に設定する方法はありますか?たとえば、ポップアップが中断されるべきではない操作の途中にある場合などです。
RonLugge 2015年

35
backdrop : 'static'

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

keyboard :false

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

答えてくれたpkozlowski.opensourceに感謝します。

質問はAngularUI BootstrapModalの複製だと思います -ユーザーの操作を防ぐ方法


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

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


それは私の質問にどのように答えますか?
Rahul Prasad

これにより、指示の理由により、モーダルが閉じるように指示されているかどうかをインターセプトできます。これに基づいて、必要に応じてカスタムロジックを追加するか、実際にモーダルを閉じる前にユーザーに確認を求めます。
ティアゴ

質問が述べたように、モーダルが閉じるのを防ぐロジックを教えてください。
Rahul Prasad

それだけが必要な場合は、event.preventDefault();insidecase "backdrop click"を使用して戻り、実行を終了します。
ティアゴ

4
+1。これは実際には、機能(背景とキーボードトリガー)を制限せずにモーダルが閉じないようにするためのはるかに優れた方法です。注:イベントはブロードキャストされるため、uibModalInstanceスコープまたはダウンストリームスコープでリッスンする必要があります。0.13現在:a5a82d9
セルゲイポポフ

13

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

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

static 動作する可能性があります。


モーダルウィンドウの外側をクリックしたときに背景が表示されず、モーダルウィンドウが閉じられるようにするオプションはありますか?

8

グローバルに構成し、

デコレータ Angularの最高の機能の1つ。サードパーティのモジュールに「パッチを適用する機能を提供します。

すべての$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/2MWIpOs3uAG5EFQy6Ndnp = preview


5

新しいバージョンのngDialog(0.5.6)の場合は、次を使用します。

closeByEscape : false
closeByDocument : false
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.