More controls on closing a dialog.

nakupanda · May 22, 2014 · 52747b8 · 52747b8
1 parent b2b7dd1
commit 52747b8
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 6 deletions.
diff --git a/examples/assets/bootstrap-dialog/js/bootstrap-dialog.js b/examples/assets/bootstrap-dialog/js/bootstrap-dialog.js
@@ -75,6 +75,8 @@
         message: null,
         nl2br: true,
         closable: true,
+        closeByBackdrop: true,
+        closeByKeyboard: true,
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
         draggable: false
@@ -303,6 +305,22 @@
 
             return this;
         },
+        setCloseByBackdrop: function(closeByBackdrop) {
+            this.options.closeByBackdrop = closeByBackdrop;
+
+            return this;
+        },
+        canCloseByBackdrop: function() {
+            return this.options.closeByBackdrop;
+        },
+        setCloseByKeyboard: function(closeByKeyboard) {
+            this.options.closeByKeyboard = closeByKeyboard;
+
+            return this;
+        },
+        canCloseByKeyboard: function() {
+            return this.options.closeByKeyboard;
+        },
         getSpinicon: function() {
             return this.options.spinicon;
         },
@@ -659,12 +677,12 @@
 
             // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
             this.getModal().on('click', {dialog: this}, function(event) {
-                event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
+                event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
             });
 
             // ESC key support
             this.getModal().on('keyup', {dialog: this}, function(event) {
-                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
+                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
             });
 
             // Button hotkey

diff --git a/examples/assets/bootstrap-dialog/js/bootstrap-dialog.min.js b/examples/assets/bootstrap-dialog/js/bootstrap-dialog.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -423,6 +423,30 @@ <h3>Dialog closable / unclosable</h3>
         -->
     </div>
 
+    <a name="more-close-controls"></a>
+    <h3>More controls on closing a dialog.</h3>
+    <p>
+        By default, when option 'closable' is set to true, dialog can be closed by these ways: clicking outside the dialog, pressing ESC key, clicking the close icon on the right of dialog header. <br />
+        If you want your dialog closes only when the close icon in dialog header was clicked, try setting both of the options 'closeByBackdrop' and 'closeByKeyboard' to false.
+    </p>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            message: 'Hi Apple!',
+            message: 'You can not close this dialog by clicking outside and pressing ESC key.',
+            closable: true,
+            closeByBackdrop: false,
+            closeByKeyboard: false,
+            buttons: [{
+                label: 'Close the dialog',
+                action: function(dialogRef){
+                    dialogRef.close();
+                }
+            }]
+        });
+        -->
+    </div>
+
     <h3>Auto spinning icon</h3>
     <p>
         Lazy guys must love this.

diff --git a/js/bootstrap-dialog.js b/js/bootstrap-dialog.js
@@ -75,6 +75,8 @@
         message: null,
         nl2br: true,
         closable: true,
+        closeByBackdrop: true,
+        closeByKeyboard: true,
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
         draggable: false
@@ -303,6 +305,22 @@
 
             return this;
         },
+        setCloseByBackdrop: function(closeByBackdrop) {
+            this.options.closeByBackdrop = closeByBackdrop;
+
+            return this;
+        },
+        canCloseByBackdrop: function() {
+            return this.options.closeByBackdrop;
+        },
+        setCloseByKeyboard: function(closeByKeyboard) {
+            this.options.closeByKeyboard = closeByKeyboard;
+
+            return this;
+        },
+        canCloseByKeyboard: function() {
+            return this.options.closeByKeyboard;
+        },
         getSpinicon: function() {
             return this.options.spinicon;
         },
@@ -659,12 +677,12 @@
 
             // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
             this.getModal().on('click', {dialog: this}, function(event) {
-                event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
+                event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close();
             });
 
             // ESC key support
             this.getModal().on('keyup', {dialog: this}, function(event) {
-                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
+                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close();
             });
 
             // Button hotkey

diff --git a/js/bootstrap-dialog.min.js b/js/bootstrap-dialog.min.js