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

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!

https://stackoverflow.com/questions/66130087/cant-figure-out-how-to-close-modal-by-clicking-outside-window February 10, 2021 at 10:25AM