Problems with showing pop-up window in Squarespace using HTML, CSS, JS

[swakka]

I am trying to have a clickable pop-up text box bring up a lightbox styled photo gallery that people and click on and scroll through. The text itself shows and is clickable but nothing comes up.

Here is the page header code injection.
<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>

and here is the code within the code box.

<a class="popup-link">Open Gallery</a>
<div id="popup-gallery" class="mfp-hide">
  <a href="https://images.squarespace-cdn.com/content/v1/6498a23f11b23d243f2f6c28/d7a3913a-3868-4d37-a367-5452713828f1/Untitled-Artwork+2+%281%29.jpg?format=300w"><img src="image1.jpg" alt="Image 1"></a>
  <a href="https://images.squarespace-cdn.com/content/v1/6498a23f11b23d243f2f6c28/804d6176-5ebb-4bca-aced-ecb0193a45eb/Untitled-Artwork+%282%29.jpg?format=300w"><img src="image2.jpg" alt="Image 2"></a>
  <a href="https://images.squarespace-cdn.com/content/v1/6498a23f11b23d243f2f6c28/42599946-138d-4ad0-a6ae-cbfaa9998b0d/Untitled-Artwork+1+%281%29.jpg?format=300w"><img src="image3.jpg" alt="Image 3"></a>
 <a href="https://images.squarespace-cdn.com/content/v1/6498a23f11b23d243f2f6c28/4a2bb218-fd55-448c-8283-11a9071fb604/flash3.jpg?format=300w"><img src="image3.jpg" alt="Image 4"></a>
    <a href="https://images.squarespace-cdn.com/content/v1/6498a23f11b23d243f2f6c28/3e610eb0-e496-4339-a08a-598406247599/f3.jpg?format=300w"><img src="image3.jpg" alt="Image 5"></a>
</div>


<style>
  #popup-gallery {
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-align: center;
  }


  #popup-gallery img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>




<script>
  $(document).ready(function() {
    $('.popup-link').magnificPopup({
      type: 'inline',
      preloader: false,
      closeOnBgClick: true,
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Preload 2 images ahead
      }
    });
  });
</script>

Appreciate any help!

 

[JosiahMaybe]

Is it just me or does mfp-hide as a class sound like class makes it hidden?
Maybe you need to call that div.hidden = false or something.
I am not an expert on this, but consider that div class maybe.
X E.