Roo/bootstrap/Modal.js

[roojs1] / Roo / bootstrap / Modal.js

diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js
index 80b28ee..aad6c94 100644 (file)
--- a/Roo/bootstrap/Modal.js
+++ b/Roo/bootstrap/Modal.js
@@ -41,7 +41,14 @@ Roo.bootstrap.Modal = function(config){
          * @param {Roo.bootstrap.Modal} this
          * @param {Roo.EventObject} e
          */
-        "resize" : true
+        "resize" : true,
+         /**
+         * @event close
+         * Fire when the top 'x' close button is pressed.
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         */
+        "close" : true
     });
     this.buttons = this.buttons || [];
 
@@ -138,7 +145,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
                 var btn = Roo.factory(b);
 
-                btn.render(this.el.select('.modal-footer div').first());
+                btn.render(this.getButtonContainer());
 
             },this);
         }
@@ -180,7 +187,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if(this.specificTitle){
             title = this.title;
 
-        };
+        }
 
         var header = [];
         if (this.allow_close && Roo.bootstrap.version == 3) {
@@ -278,6 +285,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
 
     },
+  
 
     resize : function()
     {
@@ -287,9 +295,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         );
         
         if (this.fitwindow) {
+            
+           
             this.setSize(
                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
-                this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+                this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
             );
             return;
         }
@@ -350,7 +360,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         Roo.get(document.body).addClass('modal-open');
  
         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
-            var _this = this;
+            
             (function(){
                 this.el.addClass('show');
                 this.el.addClass('in');
@@ -442,7 +452,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         var btn = Roo.factory(b);
 
-        btn.render(this.el.select('.modal-footer div').first());
+        btn.render(this.getButtonContainer());
 
         return btn;
 
@@ -452,22 +462,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     {
         //this.el.select('.modal-footer').()
     },
-    diff : false,
 
     resizeTo: function(w,h)
     {
-        // skip.. ?? why??
-
         this.dialogEl.setWidth(w);
-        if (this.diff === false) {
-            this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
-        }
-
-        this.bodyEl.setHeight(h - this.diff);
+        
+        var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
 
+        this.bodyEl.setHeight(h - diff);
+        
         this.fireEvent('resize', this);
-
     },
+    
     setContentSize  : function(w, h)
     {