Home Explore Help
Sign In
githab
/
bootstrap3-dialog
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

more plays

Dante 11 years ago
parent
7ad2600b9c
commit
96fb9f1177
2 changed files with 71 additions and 0 deletions
Split View Show Diff Stats
  1. 28 0
      play/append-to-div.html
  2. 43 0
      play/button-event.html

+ 28 - 0
play/append-to-div.html
View File 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <script src="../assets/jquery/jquery-1.10.2.min.js"></script>
 
+        <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 
+        <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
 
+        <link href="../assets/bootstrap-dialog/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
 
+        <script src="../assets/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
 
+        <title>Append modal to div</title>
 
+        <meta charset="utf-8" />
 
+    </head>
 
+    <body>
 
+        <div id="modal-container"></div>
 
+        <script type="text/javascript">
 
+            /**
 
+             * This example demonstrates how to append modal stuff to a div other than body.
 
+             */
 
+            $(function() {
 
+                var dialog = new BootstrapDialog({
 
+                    title: 'Not in body',
 
+                    message: 'But somewhere else.'
 
+                });
 
+                $('#modal-container').append(dialog);
 
+                dialog.open();
 
+            });
 
+        </script>
 
+    </body>
 
+</html>

+ 43 - 0
play/button-event.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <script src="../assets/jquery/jquery-1.10.2.min.js"></script>
 
+        <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 
+        <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
 
+        <link href="../assets/bootstrap-dialog/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
 
+        <script src="../assets/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
 
+        <title>Button Event</title>
 
+        <meta charset="utf-8" />
 
+    </head>
 
+    <body>
 
+        <script type="text/javascript">
 
+            $(function() {
 
+                var dialog = new BootstrapDialog({
 
+                    closable: false,
 
+                    buttons: [{
 
+                            label: 'Button 1',
 
+                            action: function(dialog, event) {
 
+                                // this.data('button') is the original button config
 
+                                console.log(this.data('button'));
 
+
 
+                                // Stop bubbling. 'event' here is the original event object of 'click'.
 
+                                event.stopPropagation();
 
+                            }
 
+                        }, {
 
+                            label: 'Button 2',
 
+                            action: function(dialog) {
 
+                                // Does nothing
 
+                            }
 
+                        }],
 
+                    onshown: function(dialog) {
 
+                        var $footer = dialog.getModalFooter();
 
+                        $footer.on('click', function(event) {
 
+                            alert('Footer was hit.');
 
+                        });
 
+                    }
 
+                });
 
+                dialog.open();
 
+            });
 
+        </script>
 
+    </body>
 
+</html>