Fixing gallery modal size and background scrolling (#1169)

sjmiller7 · web-flow · commit ff20a1855584 · 2021-02-14T02:01:44.000-05:00
* the modal is fixed, thanks colby

* deleting the inline CSS for overflow on hide
diff --git a/gallery.html b/gallery.html
@@ -17,11 +17,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div id="modal">
-        <i class="fas fa-times" id="close-modal"></i>
-        <img id="modal-img" src="https://images.unsplash.com/photo-1567309254107-5babef35b7b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="image"/>
+    <div id="modal-container">
+        <div id="modal">
+            <i class="fas fa-times" id="close-modal"></i>
+            <img id="modal-img" src="https://images.unsplash.com/photo-1567309254107-5babef35b7b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="image"/>
+        </div>
     </div>
-    <div id="modal-background"></div>
     <nav>
         <div id="mobile-menu">
             <i class="fas fa-bars" id="toggler"></i>
diff --git a/gallery.js b/gallery.js
@@ -62,25 +62,27 @@ function viewAlbum(albumName) {
 // Opening modal
 $(document).on('click', function(event) {
     if ($(event.target).hasClass('image')) {
-        $('#modal').show();
-        var top = 'calc(5% + ' + (window.scrollY) + 'px)';
         var fullUrl = $(event.target).attr('data-bg').replaceAll('/thumb/', '/full/');
         $('#modal-img').attr('src', fullUrl);
-        $('#modal').css('top', top);
-        $('#modal-background').show();
+        $('#modal-container').css('display', 'flex');
+        $('html').css('overflow', 'hidden');
     }
 });
 
 // Closing modal with x
 $('#close-modal').on('click', function() {
-    $('#modal').hide();
-    $('#modal-background').hide();
+    $('#modal-container').hide();
+    $('html').css('overflow', '');
+});
+
+$('#modal').on('click', function(event) {
+    event.stopPropagation();
 });
 
 // Closing modal with background
-$('#modal-background').on('click', function() {
-    $('#modal').hide();
-    $('#modal-background').hide();
+$('#modal-container').on('click', function(event) {
+    $('#modal-container').hide();
+    $('html').css('overflow', '');
 });
 
 // Navbar functionality
diff --git a/sass/gallery.scss b/sass/gallery.scss
@@ -123,14 +123,18 @@ p {
     }
 }
 
-#modal-background {
+#modal-container {
     background-color: rgba(black, 85%);
     width: 100%;
     height: 100%;
     position: fixed;
+    padding: 25px;
     z-index: 2;
     display: none;
+    justify-content: center;
+    align-items: center;
     top: 0;
+    overflow: auto;
     cursor: pointer;
 }
 
@@ -139,22 +143,20 @@ p {
     background-color: $off-white;
     border-radius: 20px;
     padding-top: 50px;
-    top: 10%;
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
     margin: auto;
-    width: auto;
-    left: 50%;
-    transform: translateX(-50%);
-    max-height: 90%;
-    position: absolute;
     z-index: 3;
-    display: none;
+    display: block;
+    cursor: default;
 
     img {
         display: block;
-        max-width: 100%;
-        max-height: calc(90vh - 40px); // 40px from the padding of modal (20 top + 20 bottom)
         width: auto;
         height: auto;
+        max-width: 100%;
+        max-height: 100%;
         border: 8px solid $off-white;
         border-top: none;
         border-radius: 20px;
@@ -187,21 +189,6 @@ p {
     .image-container {
         grid-template-columns: repeat(2, 1fr);
     }
-
-    #modal {
-        width: 90%;
-        max-height: none;
-        padding-top: 40px;
-
-        img {
-            width: 100%;
-            max-height: none;
-        }
-    }
-
-    #close-modal {
-        font-size: 30px;
-    }
 }
 
 @media screen and (max-width: 660px) {
