Bagaimana cara mencegah modal angular-ui ditutup?

Jawaban:

195

Saat membuat modal, Anda dapat menentukan perilakunya:

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
artur grzesiak
sumber
2
Ya, ini jawaban yang benar :) Terima kasih telah membagikannya!
skywalker
Keren! Terima kasih telah berbagi. +1
Khanh Tran
10
Adakah cara untuk mengatur ini secara dinamis - katakan jika popup ada di tengah operasi yang tidak boleh diganggu?
RonLugge
35
backdrop : 'static'

Akan berfungsi untuk acara 'klik' tetapi Anda masih dapat menggunakan tombol "Esc" untuk menutup munculan.

keyboard :false

untuk mencegah munculan di dekat tombol "Esc".

Terima kasih kepada pkozlowski.opensource untuk jawabannya.

Saya pikir pertanyaannya adalah duplikat dari Modal Bootstrap UI Angular - bagaimana mencegah interaksi pengguna

Sachin G.
sumber
23

Pertanyaan lama, tetapi jika Anda ingin menambahkan dialog konfirmasi pada berbagai tindakan tutup, tambahkan ini ke pengontrol contoh modal Anda:

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

Saya memiliki tombol tutup di kanan atas, yang memicu tindakan "batal". Mengklik latar belakang (jika diaktifkan), memicu tindakan pembatalan. Anda dapat menggunakannya untuk menggunakan pesan yang berbeda untuk berbagai acara dekat.

Tiago
sumber
Bagaimana cara menjawab pertanyaan saya?
Rahul Prasad
Dengan ini Anda dapat mencegat jika modal telah diinstruksikan untuk ditutup, dengan alasan instruksi tersebut. Berdasarkan itu Anda menambahkan logika kustom jika diinginkan, atau mungkin meminta pengguna untuk konfirmasi sebelum benar-benar menutup modal.
Tiago
Seperti pertanyaan yang dinyatakan, Beri tahu saya logika, yang akan mencegah penutupan modal?
Rahul Prasad
Jika hanya itu yang Anda inginkan, gunakan saja event.preventDefault();di dalam case "backdrop click"dan kembali untuk mengakhiri eksekusi.
Tiago
5
+1. Ini sebenarnya adalah cara yang jauh lebih baik untuk mencegah modal ditutup tanpa membatasi fitur (pemicu latar belakang & keyboard). Catatan: acara disiarkan sehingga harus didengarkan di cakupan uibModalInstance atau cakupan downstream. Mulai 0.13: a5a82d9
Sergej Popov
13

Inilah yang disebutkan dalam dokumentasi

backdrop - mengontrol keberadaan backdrop. Nilai yang diizinkan: true (default), false (tanpa backdrop), 'static' - backdrop ada tetapi jendela modal tidak ditutup saat mengklik di luar jendela modal.

static mungkin berhasil.

Chandermani
sumber
Apakah ada opsi agar tidak ada tampilan latar yang ditampilkan dan jendela modal harus ditutup saat mengklik di luar jendela modal?
8

Konfigurasi secara global,

dekorator , salah satu fitur terbaik di sudut. memberikan kemampuan untuk "menambal" modul pihak ketiga.

Katakanlah Anda menginginkan perilaku ini di semua $modalreferensi Anda dan Anda tidak ingin mengubah panggilan Anda,

Anda bisa menulis dekorator . yang hanya menambah opsi -{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;
    })
});
  • Catatan: di versi terbaru, $modalnamanya diubah menjadi$uibModal

Demo online - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview

Jossef Harush
sumber
5

untuk versi baru ngDialog (0.5.6), gunakan:

closeByEscape : false
closeByDocument : false
Ben Cohen
sumber