You can easily hide a div or object by clicking outside using jquery. to see our caption code below.

In this example, we use an .mouseup () event. when the user clicks outside and an event occurs and then we will check the id element element. if anything is found we will hide it.


#example.html

            var mouse_is_inside = false;
            $(document).ready(function()
            {
                $('.form_content').hover(function() {
                    mouse_is_inside = true;
                }, function() {
                    mouse_is_inside = false;
                });

                $("body").mouseup(function() {
                    if (!mouse_is_inside)
                        $('.form_wrapper').hide();
                });
            });


#complete_example.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="form_wrapper" style="background: #ccc;padding: 30px;">
            <a class="agree" href="[removed];">Click anywhere to disappear it</a>

        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"  crossorigin="anonymous"></script>
        <script>
            var mouse_is_inside = false;

            $(document).ready(function()
            {
                $('.form_content').hover(function() {
                    mouse_is_inside = true;
                }, function() {
                    mouse_is_inside = false;
                });

                $("body").mouseup(function() {
                    if (!mouse_is_inside)
                        $('.form_wrapper').hide();
                });
            });
        </script>
    </body>
</html>

This code detects any click event on the page and then hides the .form_wrapper element