0

No matter what I try, it just won't work for me. I'm wanting the user to click on an apple and display a modal. I placed an "x" inside the modal for closing it. I just need to know how I can close it by clicking outside of the modal.

Here is my JavaScript code for the apple button:

    <script>
        var ambModal = $('#ambPopup');

        $('#amb').click(function() {
            ambModal.show();
        });

        $('.ambClose').click(function() {
        ambModal.hide();
    });

    </script>

This works perfectly, but I've scoured the Internet looking for solutions and nothing I've tried has solved my problem. I do have jQuery loaded in the HTML. Is Bootstrap required for this function to work? It's possible I've got my header wrong.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apples2Apples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="applestyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

<!--FONT FOR BODY-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

Am I missing something? Please, someone reply if you can. Thank you!

marjthebyrd
  • 1
  • Welcome marjthebyrd! Okay, I think we are missing part of the code based on what you posted -- can you include the entire page markup, since that will determine how the snippet you included works? – ninapavlich Feb 10 '21 at 03:11
  • Hello! I'm kind of new to this site. Could you please tell me how to include the page markup in a comment? EDIT: I found a way to show all of my code through my GitHub. https://github.com/MarceiaP/Main_Projects/tree/main/PROJECTS/apples2apples – marjthebyrd Feb 10 '21 at 03:25
  • https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element – epascarello Feb 10 '21 at 04:10

2 Answers2

1

Not sure your use case but what works for me is to include an extra element behind the modal (like an overlay but can be transparent if you want) to catch the click outside the modal window. Here is an example.

$("body").on("click", '.toggle-modal', function() {
  if ($('#ambPopup').is(":visible")) {
    $('#ambPopup').fadeOut("fast", function() {
      $(this).remove();
    });
  } else {
    const modal = $("<div />", {
      "id": "ambPopup"
    }).append(
      $("<div />", {
        "class": "modal-overlay toggle-modal"
      }),
      $("<div />", {
        "class": "modal-content"
      }).text("Content for the modal. Can be dynamic too.").append(
        $("<div />", {
          "class": "modal-close toggle-modal"
        })
      )
    ).appendTo("body").fadeIn("fast").css("display", "flex");
  }
});
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ambPopup {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .1);
  cursor: pointer;
}

.modal-content {
  background: white;
  padding: 30px;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  z-index: 2;
  position: relative;
  margin: auto;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="toggle-modal">Show modal</button>
return_false
  • 659
  • 3
  • 7
  • Hey, I tried your method, but couldn't get it to work. I did manage to find another way to fix the problem. Regardless, thank you so much for your help. The solution goes something like this: $(document).ready(function () { $('#popup').hide() }); $('#open').on('click', function () { $('#popup').show(500) }); $(document).mouseup(function (e) { var popup = $("#popup"); if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) { popup.hide(500); } }); – marjthebyrd Feb 11 '21 at 02:08
  • There you go. Might be a good idea to take off that mouseup listener after the modal is closed. Does anyone know if that is necessary, or does it go away on its own? – return_false Feb 11 '21 at 02:50
0

I believe you are using a custom modal?

You can use the Bootstrap Modal for your version (3.4.1) here.

They already have the scripts for closing the modal from the close button and from clicking outside or the backdrop.

Chevee Ferrer
  • 1
  • 1