JSFiddle - React, Tailwind, and code Playground

HTML

<a id="temp-button" href="#">Show it again</a>

<div id="modal-box-1" class="modal-box">
    Hello <a href="http://www.google.com/search?q=world" target="_blank">World</a>
</div>

CSS

body {
    background: #ccc;
}

.modal-box {
    margin: 100px;
    padding: 20px;
    border: 1px solid #333;
    background: #fff;
}

JavaScript

$(document).click(function(e) {
    
    console.log('clicked', this, e); // DEBUG
    
    var $target = $(e.target);
    var isModalBox = (e.target.className == 'modal-box');
    console.log('isModalBox =', isModalBox); // DEBUG
    
    if (!isModalBox) {
        $('.modal-box:visible').animate({
            "margin-top": "-15px"
        }, 75, function() {
            $(this).fadeOut(75);
        });
    }
});

$('body').click(function(e) {
    console.log('clicked', this); // DEBUG
});

$('.modal-box').click(function(e) {
    console.log('clicked', this); // DEBUG
});

$('a').click(function(e) {
    console.log('clicked', this); // DEBUG
    e.stopPropagation(); // Important if you´d like all links to work as usual as it stops the event from propagating to parent elements.
});

$('#temp-button').click(function(e) {
    e.preventDefault();
    $('.modal-box').show().animate({
        "margin-top": "0px"
    }, 75);
});