JS popup box

sample.html

<!--
  HTML popup box with click-outside-to-close functionality
  Requires jQuery
-->

<div id="popupWrapper">
    <a>
        Open
    </a>
    <div tabindex="-1">
      <p>Whatever content you need...</p>
    </div>
</div>

<script>
  var popupContainer = $("#popupWrapper > div");
    
    $("#popupWrapper > a").click(function (e) {
        e.preventDefault();
        isOpen = !isOpen;
        if (isOpen) {
            popupContainer.fadeIn(100);
            popupContainer.focus();
        } else {
            popupContainer.fadeOut(100);
        }
    });

    popupContainer.focusout(function () {
        setTimeout(function () {
            var hasFocus = popupContainer.is(":focus") || popupContainer.find(":focus").length > 0;
            if (!hasFocus) {
                popupContainer.fadeOut(100, function () {
                    isOpen = false;
                });
            }
        }, 0);
    });
</script>

<style>
  #popupWrapper {
        position: relative;
        display: inline-block;
    }

    #popupWrapper > div {
        position: absolute;
        display: none;
        z-index: 2;
        font-size: 15px;
        width: 300px;
        font-weight: 400;
        right: 0;
    }

    #popupWrapper > div:focus {
        outline: none;
    }
</style>