Merge pull request #13 from web-illinois/issue-12

Issue 12 fix for page and modal scrolling

Author: nhjohnstone

builder/ilw-modal.json

@@ -6,7 +6,7 @@
     "element-name": "ilw-modal",
     "description": "The modal component provides a modal that opens on top of a web page.",
     "purpose": "To provide a modal window to open content on top of a web page.",
-    "toolkit-version": "1.1",
-    "production-version": "1.1",
+    "toolkit-version": "1.2",
+    "production-version": "1.2",
     "development-version": "1.0-alpha"
 }

builder/versions/ilw-modal.1.2.json

@@ -0,0 +1,81 @@
+{
+    "title": "Modal",
+    "tag": "ilw-modal",
+    "github": "https://github.com/web-illinois/ilw-modal/",
+    "type": "web component",
+    "element-name": "ilw-modal",
+    "description": "The modal component provides a modal that opens on top of a web page.",
+    "builder-version": "1.2",
+    "version": "1.2",
+    "date": "02/27/2026",
+    "css": "https://cdn.toolkit.illinois.edu/ilw-modal/1.2/ilw-modal.css",
+    "js": "https://cdn.toolkit.illinois.edu/ilw-modal/1.2/ilw-modal.js",
+    "production": true,
+    "notes": "",
+    "parent-style": "",
+    "addon-html": "<button class='ilw-button' data-modal-target='modal'>Open Modal Button</button> -- <a href='javascript:void(0)' class='ilw-button' data-modal-target='modal' role='button'>Open Modal Link</a>",
+    "samples": [
+        {
+            "name": "default",
+            "description": "Default information",
+            "text": "<h2 slot=\"title\">Default Modal</h2>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus velit, feugiat in lacinia eget, tristique ut orci. Phasellus ut egestas tellus. In hac habitasse platea dictumst.</p>\n    <form style=\"display: flex; flex-direction: column; gap: 1rem;\">\n        <label style=\"font-size: 1rem; font-weight: bold;\" for=\"email\">Enter your email</label>\n        <div style=\"display: flex; gap: 1rem; width: 100%; align-items: center;\">\n            <input style=\"flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;\" type=\"email\" id=\"email\" name=\"email\" required>\n            <button class=\"ilw-button\" type=\"submit\">Submit</button>\n        </div>\n    </form>"
+        },
+        {
+            "name": "image",
+            "description": "Modal with an image",
+            "text": "<img src=\"https://picsum.photos/700/400\" alt=\"\" slot=\"image\">\n    <h2 slot=\"title\">Medium Modal</h2>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus velit, feugiat in lacinia eget, tristique ut orci. Phasellus ut egestas tellus. In hac habitasse platea dictumst.</p>\n    <form style=\"display: flex; flex-direction: column; gap: 1rem;\">\n        <label style=\"font-size: 1rem; font-weight: bold;\" for=\"email\">Enter your email</label>\n        <div style=\"display: flex; gap: 1rem; width: 100%; align-items: center;\">\n            <input style=\"flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;\" type=\"email\" id=\"email\" name=\"email\" required>\n            <button class=\"ilw-button\" type=\"submit\">Submit</button>\n        </div>\n    </form>"
+        }
+    ],
+    "attributes-fixed": [
+        {
+            "name": "id",
+            "description": "id of the modal",
+            "depreciated": false,
+            "value": "modal"
+        }
+    ],
+    "attributes-text": [
+        {
+            "depreciated": false,
+            "name": "id",
+            "description" : "Provide your own id for the modal, this will replace the default id.",
+            "type": "string",
+            "value": ""
+        }
+    ],
+    "attributes": [
+        {
+            "name": "theme",
+            "description": "Color theme used",
+            "depreciated": false,
+            "values": [
+                "",
+                "gray"
+            ]
+        },
+        {
+            "name": "size",
+            "description": "Size of modal window",
+            "depreciated": false,
+            "values": [
+                "",
+                "small",
+                "medium",
+                "large"
+            ]
+        },
+        {
+            "name": "align",
+            "description": "Alignment of content in modal window",
+            "depreciated": false,
+            "values": [
+                "",
+                "center"
+            ]
+        }
+    ],
+    "classes-fixed": [],
+    "classes": [],
+    "css-variables": [
+    ]
+}

package.json

@@ -4,7 +4,7 @@
     "repository": "github:web-illinois/ilw-modal",
     "private": false,
     "license": "MIT",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "type": "module",
     "files": [
         "src/**",

samples/index.html

@@ -48,6 +48,23 @@ <h1>Modal</h1>
 
 <button class="ilw-button" data-modal-target="modal-id2">Open Modal Button</button>
 
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
 
 
 
@@ -64,8 +81,10 @@ <h2 slot="title">Apply to the College</h2>
 
 <ilw-modal id="modal-id1" size="medium" theme="gray">
     <img src="https://picsum.photos/700/400" alt="" slot="image">
-    <h2 slot="title">Medium Modal</h2>
+    <h2 slot="title">Medium Modal with a Long Title Will it Wrap</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus velit, feugiat in lacinia eget, tristique ut orci. Phasellus ut egestas tellus. In hac habitasse platea dictumst.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus velit, feugiat in lacinia eget, tristique ut orci. Phasellus ut egestas tellus. In hac habitasse platea dictumst.</p>
+
     <form>
         <label for="email">Enter your email</label>
         <div class="form-row">

src/ilw-modal.css

@@ -5,6 +5,8 @@ ilw-modal {
   h2 {
     font-family: var(--ilw-modal--heading--font);
     font-size: var(--ilw-modal--heading--font-size);
+    line-height: var(--ilw-modal--heading--line-height);
+    margin: var(--ilw-modal--heading--margin);
     color: var(--ilw-modal--heading-color);
   }
 }

src/ilw-modal.styles.css

@@ -9,6 +9,8 @@
         --ilw-modal--heading-color: var(---ilw-color--heading);
         --ilw-modal--heading--font: var(--il-font-montserrat);
         --ilw-modal--heading--font-size: 2.25rem;
+        --ilw-modal--heading--line-height: 1.2;
+        --ilw-modal--heading--margin: 2rem 0 1.3125rem 0;
         --ilw-modal--border-top: 8px solid var(--ilw-color--control-accent);
         --ilw-modal--background: var(--ilw-color--background);
         --ilw-modal--close-btn--color: var(--ilw-color--control-text);
@@ -29,13 +31,16 @@
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: flex-start;
-    padding-top: 20vh;
+    padding-top: 5vh;
     justify-content: center;
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
+
 :host([open]) .backdrop {
     visibility: visible;
     opacity: 1;
@@ -51,6 +56,9 @@
     border-top: var(--ilw-modal--border-top);
     display: flex;
     flex-direction: column;
+    max-height: 80vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 .modal.small {
@@ -73,6 +81,9 @@
 }
 
 @media (max-width: 600px) {
+    .backdrop {
+        padding-top: 0;
+    }
     .modal.small,
     .modal.medium,
     .modal.large {

src/ilw-modal.ts

@@ -29,6 +29,51 @@ export default class Modal extends LitElement {
     private _lastFocusable: Element | null = null;
     private _activeTrigger: Element | null = null;
 
+    private static _scrollLockCount = 0;
+
+    private _prevHtmlOverflow: string | null = null;
+    private _prevBodyOverflow: string | null = null;
+    private _prevBodyPaddingRight: string | null = null;
+
+    private _lockPageScroll() {
+        if (Modal._scrollLockCount === 0) {
+            const html = document.documentElement;
+            const body = document.body;
+
+            this._prevHtmlOverflow = html.style.overflow;
+            this._prevBodyOverflow = body.style.overflow;
+            this._prevBodyPaddingRight = body.style.paddingRight;
+
+            // Prevent layout shift when scrollbar disappears
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            if (scrollbarWidth > 0) {
+                body.style.paddingRight = `${scrollbarWidth}px`;
+            }
+
+            html.style.overflow = 'hidden';
+            body.style.overflow = 'hidden';
+        }
+
+        Modal._scrollLockCount++;
+    }
+
+    private _unlockPageScroll() {
+        Modal._scrollLockCount = Math.max(0, Modal._scrollLockCount - 1);
+
+        if (Modal._scrollLockCount === 0) {
+            const html = document.documentElement;
+            const body = document.body;
+
+            html.style.overflow = this._prevHtmlOverflow ?? '';
+            body.style.overflow = this._prevBodyOverflow ?? '';
+            body.style.paddingRight = this._prevBodyPaddingRight ?? '';
+
+            this._prevHtmlOverflow = null;
+            this._prevBodyOverflow = null;
+            this._prevBodyPaddingRight = null;
+        }
+    }
+
     static override get styles(): CSSResult {
         return unsafeCSS(styles);
     }
@@ -44,12 +89,16 @@ export default class Modal extends LitElement {
 
     protected override updated(changedProps: PropertyValues): void {
         super.updated(changedProps);
+
         if (changedProps.has('open')) {
             if (this.open) {
+                this._lockPageScroll();
                 this._setInitialFocus();
                 document.addEventListener('keydown', this._handleKeydown);
             } else {
+                this._unlockPageScroll();
                 document.removeEventListener('keydown', this._handleKeydown);
+
                 if (this._activeTrigger && this._activeTrigger instanceof HTMLElement) {
                     this._activeTrigger.focus();
                     this._activeTrigger = null;
@@ -65,6 +114,7 @@ export default class Modal extends LitElement {
 
     override disconnectedCallback(): void {
         super.disconnectedCallback();
+        if (this.open) this._unlockPageScroll(); // Ensure scroll is unlocked if component is removed while open
         document.removeEventListener('click', this.handleExternalTrigger);
         document.removeEventListener('keydown', this._handleKeydown);
     }