Merge pull request #143 from Shopify/modal-overflow-mobile

Modal overflow mobile
Shopify · Jul 11, 2014 · b24c835 · b24c835
2 parents 6c7ee8c + f25f2a6
commit b24c835
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/assets/ajaxify.js b/assets/ajaxify.js
@@ -456,6 +456,7 @@ var ajaxifyShopify = (function(module, $) {
   };
 
   showModal = function (toggle) {
+    $body.addClass('ajaxify-modal-visible');
     // Build the cart if it isn't already there
     if ( !cartInit && toggle ) {
       Shopify.getCart(cartUpdateCallback);
@@ -490,6 +491,7 @@ var ajaxifyShopify = (function(module, $) {
   };
 
   hideModal = function (e) {
+    $body.removeClass('ajaxify-modal-visible');
     if (e) {
       e.preventDefault();
     }

diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid
@@ -165,8 +165,14 @@ $modalBorderColor: $borderColor;
 }
 
 /*============================================================================
-  Ajaxify Loader
+  General Styles
 ==============================================================================*/
+@include at-query ($max, $small) {
+  body.ajaxify-modal-visible {
+    overflow: hidden;
+  }
+}
+
 .ajaxifyCart-loader {
   display: none;
   opacity: 0;
@@ -492,6 +498,8 @@ form[action^="/cart/add"] {
   height: auto;
   z-index: 99999999;
   visibility: hidden;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
   @include transition('box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out');
 
   // Short screens