ax5modal 0.5.0 - mobile iframe support

ax5ui · Feb 1, 2016 · edcee02 · edcee02
1 parent de6bcc4
commit edcee02
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "bootstrap-ax5modal",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"authors": [
 		"ThomasJ <[email protected]>"
 	],

diff --git a/dist/ax5modal.js b/dist/ax5modal.js
@@ -68,7 +68,9 @@
             po.push('<div class="ax-modal-body" data-modal-els="body">');
             // use iframe
             if (opts.iframe) {
-                po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe"></iframe>');
+                po.push('<div data-modal-els="iframe-wrap" style="-webkit-overflow-scrolling: touch; overflow: auto;position: relative;">');
+                po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe" style="position: absolute;left:0;top:0;"></iframe>');
+                po.push('</div>');
                 po.push('<form name="' + modalId + '-form" data-modal-els="iframe-form">');
                 po.push('<input type="hidden" name="modalId" value="' + modalId + '" />');
                 if(typeof opts.iframe.param === "string"){
@@ -116,6 +118,7 @@
             };
 
             if (opts.iframe) {
+                this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]');
                 this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]');
                 this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]');
             }
@@ -133,6 +136,10 @@
             };
 
             if (opts.iframe) {
+
+                console.log();
+
+                this.$["iframe-wrap"].css({height: opts.height});
                 this.$["iframe"].css({height: opts.height});
 
                 // iframe content load
@@ -179,6 +186,7 @@
                 box.top = 0;
 
                 if (opts.iframe) {
+                    this.$["iframe-wrap"].css({height: box.height});
                     this.$["iframe"].css({height: box.height});
                 }
             }
@@ -270,7 +278,10 @@
                 }
                 if (css.height) {
                     self.modalConfig.height = this.activeModal.height();
-                    if(this.$["iframe"]) this.$["iframe"].css({height: self.modalConfig.height});
+                    if(this.$["iframe"]) {
+                        this.$["iframe-wrap"].css({height: self.modalConfig.height});
+                        this.$["iframe"].css({height: self.modalConfig.height});
+                    }
                 }
             }
             return this;

diff --git a/dist/ax5modal.min.js b/dist/ax5modal.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "bootstrap-ax5modal",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "A modal plugin that works with Bootstrap & jQuery",
 	"license": "MIT",
 	"repository": {

diff --git a/src/ax5modal.js b/src/ax5modal.js
@@ -68,7 +68,9 @@
             po.push('<div class="ax-modal-body" data-modal-els="body">');
             // use iframe
             if (opts.iframe) {
-                po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe"></iframe>');
+                po.push('<div data-modal-els="iframe-wrap" style="-webkit-overflow-scrolling: touch; overflow: auto;position: relative;">');
+                po.push('<iframe name="' + modalId + '-frame" src="" width="100%" height="100%" frameborder="0" data-modal-els="iframe" style="position: absolute;left:0;top:0;"></iframe>');
+                po.push('</div>');
                 po.push('<form name="' + modalId + '-form" data-modal-els="iframe-form">');
                 po.push('<input type="hidden" name="modalId" value="' + modalId + '" />');
                 if(typeof opts.iframe.param === "string"){
@@ -116,6 +118,7 @@
             };
 
             if (opts.iframe) {
+                this.$["iframe-wrap"] = this.activeModal.find('[data-modal-els="iframe-wrap"]');
                 this.$["iframe"] = this.activeModal.find('[data-modal-els="iframe"]');
                 this.$["iframe-form"] = this.activeModal.find('[data-modal-els="iframe-form"]');
             }
@@ -133,6 +136,10 @@
             };
 
             if (opts.iframe) {
+
+                console.log();
+
+                this.$["iframe-wrap"].css({height: opts.height});
                 this.$["iframe"].css({height: opts.height});
 
                 // iframe content load
@@ -179,6 +186,7 @@
                 box.top = 0;
 
                 if (opts.iframe) {
+                    this.$["iframe-wrap"].css({height: box.height});
                     this.$["iframe"].css({height: box.height});
                 }
             }
@@ -270,7 +278,10 @@
                 }
                 if (css.height) {
                     self.modalConfig.height = this.activeModal.height();
-                    if(this.$["iframe"]) this.$["iframe"].css({height: self.modalConfig.height});
+                    if(this.$["iframe"]) {
+                        this.$["iframe-wrap"].css({height: self.modalConfig.height});
+                        this.$["iframe"].css({height: self.modalConfig.height});
+                    }
                 }
             }
             return this;