Modal immediately fades out on click (custom code help)

Design help Custom code
#1

Howdy, im following an older forum post on creating a modal with custom code. Everything works fine except when I added the snippet to close the modal window by clicking on the body , it now immediately closes the modal when you click to open it :confused:

I didn’t see anyone else having this issue in the thread. Any idea what’s going on here? I’m a .js rookie.

Gif of unwanted behavior

The code:

$(document).ready(function() {
  $('.modal-link-1').click(function() {
    $('.modal-container-1').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-container-1').fadeOut();
  });
  $('body').click(function() {
    $('.modal-container-1').fadeOut();
  });
});

Here is my site Read-Only: https://www.mindsetux.com/home-v2
https://preview.webflow.com/preview/portfolio-v2-9fc31b?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-v2-9fc31b&preview=8c6a6b896fb7d3e80e4f96c168f803f0&pageId=5fde8f2bb0fc7023cf45c12e&mode=preview

#2

When clicking the card, you’re also triggering the body click I guess? Why not remove that function and add in one for .modal-frame instead?

#3

i tried that with modal-bg and it didnt work, when I target modal-frame, when you click on any content in the modal it closes the modal too :sweat_smile:

#4

I solved it, had to change the modal-frame to hug the body content instead of being full width since it was sitting on top of modal-bg it wasn’t clickable.