Saya menggunakan Angular UI $ modal dalam proyek saya http://angular-ui.github.io/bootstrap/#/modal
Saya tidak ingin pengguna menutup modal dengan menekan backdrop. Saya ingin sebuah modal hanya bisa ditutup dengan menekan tombol close yang sudah saya buat.
Bagaimana cara mencegah penutupan modal?
angularjs
angular-ui
angularjs-service
Rahul Prasad
sumber
sumber
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
sumber
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.
sumber
event.preventDefault();
di dalamcase "backdrop click"
dan kembali untuk mengakhiri eksekusi.Inilah yang disebutkan dalam dokumentasi
static
mungkin berhasil.sumber
Konfigurasi secara global,
dekorator , salah satu fitur terbaik di sudut. memberikan kemampuan untuk "menambal" modul pihak ketiga.
Katakanlah Anda menginginkan perilaku ini di semua
$modal
referensi 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; }) });
$modal
namanya diubah menjadi$uibModal
Demo online - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview
sumber
untuk versi baru ngDialog (0.5.6), gunakan:
closeByEscape : false closeByDocument : false
sumber