Can't figure out how to close modal by clicking outside window

Question

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!

Answer 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>

Answer 2

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.