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!