プロジェクトでAngularUI $ modalを使用しています http://angular-ui.github.io/bootstrap/#/modal
ユーザーが背景を押してモーダルを閉じてほしくない。作成した閉じるボタンを押すだけでモーダルを閉じることができます。
モーダルが閉じないようにするにはどうすればよいですか?
プロジェクトでAngularUI $ modalを使用しています http://angular-ui.github.io/bootstrap/#/modal
ユーザーが背景を押してモーダルを閉じてほしくない。作成した閉じるボタンを押すだけでモーダルを閉じることができます。
モーダルが閉じないようにするにはどうすればよいですか?
回答:
モーダルを作成するときに、その動作を指定できます。
$modal.open({
// ... other options
backdrop : 'static',
keyboard : false
});
backdrop : 'static'
「クリック」イベントでも機能しますが、「Esc」キーを使用してポップアップを閉じることができます。
keyboard :false
「Esc」キーでポップアップが閉じないようにします。
答えてくれたpkozlowski.opensourceに感謝します。
質問はAngularUI BootstrapModalの複製だと思います -ユーザーの操作を防ぐ方法
古い質問ですが、さまざまなクローズアクションで確認ダイアログを追加する場合は、これをモーダルインスタンスコントローラーに追加します。
$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();
}
});
右上に閉じるボタンがあり、「キャンセル」アクションがトリガーされます。背景をクリックすると(有効になっている場合)、キャンセルアクションがトリガーされます。これを使用して、さまざまなクローズイベントにさまざまなメッセージを使用できます。
event.preventDefault();
insidecase "backdrop click"
を使用して戻り、実行を終了します。
デコレータ、 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/2MWIpOs3uAG5EFQy6Ndn?p = preview