Updated examples

assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -30,6 +30,7 @@ var BootstrapDialog = null;
             autodestroy: true
         };
         this.indexedButtons = {};
+        this.registeredButtonHotkeys = {};
         this.realized = false;
         this.opened = false;
         this.initOptions(options);
@@ -431,8 +432,10 @@ var BootstrapDialog = null;
                 $button.addClass('btn-default');
             }
 
-            // Dynamically add extra functions to $button
-            this.enhanceButton($button);
+            // Hotkey
+            if (typeof button.hotkey !== undefined) {
+                this.registeredButtonHotkeys[button.hotkey] = $button;
+            }
 
             // Button on click
             $button.on('click', {dialog: this, $button: $button, button: button}, function(event) {
@@ -448,14 +451,8 @@ var BootstrapDialog = null;
                 }
             });
 
-            // Button hotKey
-            if (button.hotKey)
-                this.getModalDialog().on('keypress', function(event) {
-                    if (!event || !event.which)
-                        return;
-                    if (event.which === button.hotKey)
-                        $button.trigger('click');
-                });
+            // Dynamically add extra functions to $button
+            this.enhanceButton($button);
 
             return $button;
         },
@@ -546,19 +543,8 @@ var BootstrapDialog = null;
          */
         updateClosable: function() {
             if (this.isRealized()) {
-                // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel.
-                var $theBigMask = this.getModal();
-                $theBigMask.off('click').on('click', {dialog: this}, function(event) {
-                    event.target === this && event.data.dialog.isClosable() && event.data.dialog.close();
-                });
-
                 // Close button
                 this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable());
-
-                // ESC key support
-                $theBigMask.off('keyup').on('keyup', {dialog: this}, function(event) {
-                    event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
-                });
             }
 
             return this;
@@ -619,6 +605,25 @@ var BootstrapDialog = null;
                 dialog.showPageScrollBar(false);
             });
 
+            // 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();
+            });
+
+            // ESC key support
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.close();
+            });
+
+            // Button hotkey
+            this.getModal().on('keyup', {dialog: this}, function(event) {
+                var dialog = event.data.dialog;
+                if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') {
+                    var $button = $(dialog.registeredButtonHotkeys[event.which]);
+                    !$button.prop('disabled') && $button.focus().trigger('click');
+                }
+            });
+
             return this;
         },
         showPageScrollBar: function(show) {

index.html

@@ -168,6 +168,44 @@
         });
         -->
     </div>
+    
+    <a name="button-hotkey"></a>
+    <h3>Button Hotkey</h3>
+    <p>
+        Try to press the keys that have been associated with buttons below. <br /> 
+        Please note that the <strong>last button</strong> is disabled so nothing is going to happen when pressing its hotkey.
+    </p>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            title: 'Button Hotkey',
+            message: 'Try to press some keys...',
+            onshow: function(dialog) {
+                dialog.getButton('button-c').disable();
+            },
+            buttons: [{
+                label: '(A) Button A',
+                hotkey: 65, // Keycode of keyup event of key 'A' is 65.
+                action: function() {
+                    alert('Finally, you loved Button A.');
+                }
+            }, {
+                label: '(B) Button B',
+                hotkey: 66,
+                action: function() {
+                    alert('Hello, this is Button B!');
+                }
+            }, {
+                id: 'button-c',
+                label: '(C) Button C',
+                hotkey: 67,
+                action: function(){
+                    alert('This is Button C but you won\'t see me dance.');
+                }
+            }]
+        });
+        -->
+    </div>
 
     <h3>Creating dialog instances</h3>
     <p>BootstrapDialog.show(...) is just a shortcut method, if you need dialog instances, use 'new'.</p>
@@ -820,7 +858,7 @@ BootstrapDialog.show({
             </tr>
             <tr>
                 <td>setData(key, value)</td>
-                <td>Bind data entry to dialog instance, value can be any types that javascript supports. </td>
+                <td>Bind data entry to dialog instance, value can be any types that javascript supports.</td>
             </tr>
             <tr>
                 <td>enableButtons(boolean)</td>