Jquery overlay that works with any obnoxious framework (so long as have no need to maintain the overlay's state)

jquery_overlay_demo.html

<style>
    #background-overlay {
        cursor: zoom-out;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.75);
        width: 100%;
        height: 100%;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .overlay-image-preview {
        box-shadow: rgba(255, 255, 255, 0.3) 0px 8px 20px -8px;
        max-height: 90%;
        border: 1px solid #494949;
    }
</style>


<script>
    /* 
     Using Jquery and react without conflict. 

     Sometimes while writing a react web app, I just want to write a quick snip of Jquery that'll 
     do what task I'm looking for. There isn't really a "nice" way of using them together, because
     adding event listeners on items that'll enter and leave isn't exactly the best idea. So you 
     have to change your mindset and add event listeners on something higher, and give that 
     event listener something to latch on to (like a class or id).

     Regardless of if you're using react or angular or whatever is the hot new thing next month,
     this will still work and you don't have to write yet *another* set of:
     - action
     - store entry to watch state
     - reducer to handle the action and associated data
     - view
     */

    function createOverlay(element) {
        removeOverlay();
        var overlay = $('<div id="background-overlay" style="display:none"></div>');
        $(document.body).append(overlay);
        var clone = $(element).clone();
        clone.addClass('overlay-image-preview')
        overlay.append(clone);
        overlay.fadeIn(250)
    }

    function removeOverlay() {
        $('#background-overlay').fadeOut(250, function () {
            $(this).remove()
        })
    }

    $(document.body).on('click', '#product-preview', function (e) {
        createOverlay(e.target);
    });

    $(document.body).on('click', '#background-overlay', function (e) {
        removeOverlay();
    });
</script>