Add mobile meta tags; lock background from scrolling on open modal

castastrophe · castastrophe · commit d752bdc3964d · 2019-08-08T14:31:52.000-04:00
diff --git a/elements/pfe-modal/demo/index.html b/elements/pfe-modal/demo/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title>PatternFly Element | pfe-modal Demo</title>
 
     <noscript>
diff --git a/elements/pfe-modal/src/pfe-modal.js b/elements/pfe-modal/src/pfe-modal.js
@@ -180,6 +180,8 @@ class PfeModal extends PFElement {
         this._modalWindow.removeAttribute("hidden");
         this._overlay.removeAttribute("hidden");
         this._outer.removeAttribute("hidden");
+        // This prevents background scroll
+        document.body.style.overflow = "hidden";
         // Set the focus to the container
         this._modalWindow.focus();
       } else {
@@ -188,6 +190,8 @@ class PfeModal extends PFElement {
         this._modalWindow.setAttribute("hidden", true);
         this._overlay.setAttribute("hidden", true);
         this._outer.setAttribute("hidden", true);
+        // Return scrollability
+        document.body.style.overflow = "auto";
         // Move focus back to the trigger element
         this.trigger.focus();
       }
