浏览代码

Adding additional css classes to dialog is supported.

Dante 12 年之前
父节点
当前提交
6c57f26c95
共有 3 个文件被更改,包括 83 次插入20 次删除
  1. 20 10
      examples/assets/bootstrap-dialog/js/bootstrap-dialog.js
  2. 43 0
      examples/index.html
  3. 20 10
      js/bootstrap-dialog.js

+ 20 - 10
examples/assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -16,6 +16,7 @@ var BootstrapDialog = null;
             id: BootstrapDialog.newGuid(),
             type: BootstrapDialog.TYPE_PRIMARY,
             size: BootstrapDialog.SIZE_NORMAL,
+            cssClass: '',
             title: null,
             message: null,
             buttons: [],
@@ -91,18 +92,18 @@ var BootstrapDialog = null;
         },
         initModalStuff: function() {
             this.setModal(this.createModal())
-                    .setModalDialog(this.createModalDialog())
-                    .setModalContent(this.createModalContent())
-                    .setModalHeader(this.createModalHeader())
-                    .setModalBody(this.createModalBody())
-                    .setModalFooter(this.createModalFooter());
+            .setModalDialog(this.createModalDialog())
+            .setModalContent(this.createModalContent())
+            .setModalHeader(this.createModalHeader())
+            .setModalBody(this.createModalBody())
+            .setModalFooter(this.createModalFooter());
 
             this.getModal().append(this.getModalDialog());
             this.getModalDialog().append(this.getModalContent());
             this.getModalContent()
-                    .append(this.getModalHeader())
-                    .append(this.getModalBody())
-                    .append(this.getModalFooter());
+            .append(this.getModalHeader())
+            .append(this.getModalBody())
+            .append(this.getModalFooter());
 
             return this;
         },
@@ -220,6 +221,14 @@ var BootstrapDialog = null;
 
             return this;
         },
+        getCssClass: function() {
+            return this.options.cssClass;
+        },
+        setCssClass: function(cssClass){
+            this.options.cssClass = cssClass;
+
+            return this;
+        },
         getTitle: function() {
             return this.options.title;
         },
@@ -524,8 +533,9 @@ var BootstrapDialog = null;
         realize: function() {
             this.initModalStuff();
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
-                    .addClass(this.getType())
-                    .addClass(this.getSize());
+            .addClass(this.getType())
+            .addClass(this.getSize())
+            .addClass(this.getCssClass());
             this.getModalHeader().append(this.createHeaderContent());
             this.getModalBody().append(this.createBodyContent());
             this.getModalFooter().append(this.createFooterContent());

+ 43 - 0
examples/index.html

@@ -9,6 +9,11 @@
 <script src="assets/bootstrap-dialog/js/bootstrap-dialog.js"></script>
 <meta charset="utf-8" />
 <title>BootstrapDialog examples</title>
+<style>
+    .login-dialog .modal-dialog {
+        width: 300px;
+    }
+</style>
 </head>
 <body style="padding-bottom: 100px;">
 <div class="container">
@@ -326,6 +331,35 @@
         -->
     </div>
     
+    <h3>Adding additional css classes to your dialog</h3>
+    <p>This is useful for applying effects to specific dialogs.<br />
+    For example if you would like to give your 'login-dialog' a smaller size, you can do this way:</p>
+    <div class="source-code">
+        <!--
+        <style>
+           .login-dialog .modal-dialog {
+                width: 300px;
+            }
+        </style>
+        -->
+    </div>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            title: 'Sign In',
+            message: 'Your sign-in form goes here.',
+            cssClass: 'login-dialog',
+            buttons: [{
+                label: 'Sign In Now!',
+                cssClass: 'btn-primary',
+                action: function(dialog){
+                    dialog.close();
+                }
+            }]
+        });
+        -->
+    </div>
+    
     <h3>Data binding</h3>
     <div class="source-code runnable">
         <!--
@@ -522,6 +556,15 @@
                 </td>
             </tr>
             <tr>
+                <td>cssClass</td>
+                <td>
+                    -
+                </td>
+                <td>
+                    Additional css classes that will be added to your dialog.
+                </td>
+            </tr>
+            <tr>
                 <td>title</td>
                 <td>
                     String or Object(html)

+ 20 - 10
js/bootstrap-dialog.js

@@ -16,6 +16,7 @@ var BootstrapDialog = null;
             id: BootstrapDialog.newGuid(),
             type: BootstrapDialog.TYPE_PRIMARY,
             size: BootstrapDialog.SIZE_NORMAL,
+            cssClass: '',
             title: null,
             message: null,
             buttons: [],
@@ -91,18 +92,18 @@ var BootstrapDialog = null;
         },
         initModalStuff: function() {
             this.setModal(this.createModal())
-                    .setModalDialog(this.createModalDialog())
-                    .setModalContent(this.createModalContent())
-                    .setModalHeader(this.createModalHeader())
-                    .setModalBody(this.createModalBody())
-                    .setModalFooter(this.createModalFooter());
+            .setModalDialog(this.createModalDialog())
+            .setModalContent(this.createModalContent())
+            .setModalHeader(this.createModalHeader())
+            .setModalBody(this.createModalBody())
+            .setModalFooter(this.createModalFooter());
 
             this.getModal().append(this.getModalDialog());
             this.getModalDialog().append(this.getModalContent());
             this.getModalContent()
-                    .append(this.getModalHeader())
-                    .append(this.getModalBody())
-                    .append(this.getModalFooter());
+            .append(this.getModalHeader())
+            .append(this.getModalBody())
+            .append(this.getModalFooter());
 
             return this;
         },
@@ -220,6 +221,14 @@ var BootstrapDialog = null;
 
             return this;
         },
+        getCssClass: function() {
+            return this.options.cssClass;
+        },
+        setCssClass: function(cssClass){
+            this.options.cssClass = cssClass;
+
+            return this;
+        },
         getTitle: function() {
             return this.options.title;
         },
@@ -524,8 +533,9 @@ var BootstrapDialog = null;
         realize: function() {
             this.initModalStuff();
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
-                    .addClass(this.getType())
-                    .addClass(this.getSize());
+            .addClass(this.getType())
+            .addClass(this.getSize())
+            .addClass(this.getCssClass());
             this.getModalHeader().append(this.createHeaderContent());
             this.getModalBody().append(this.createBodyContent());
             this.getModalFooter().append(this.createFooterContent());