JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<a href="#box" rel="popup">Popup</a>

<div id="box" class="popup"> <a href="#another-box" rel="popup" onClick="updateSelected(" 1 ", "2 ", "box ");">Another box</a>

</div>
<div id="another-box" class="popup">
    <form>
        <select>
            <option id="1">option 1</option>
            <option id="2" selected>option 2</option>
        </select>
    </form>
</div>

CSS

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #333;
    display: none;
}
.popup {
    display:none;
    background:#fff;
    width:200px;
}

JavaScript

//Popup
(function ($) {
    $.fn.extend({
        leanModal: function (options) {
            var defaults = {
                top: 100,
                overlay: 0.5,
                closeButton: null
            };
            var overlay = $("<div id='lean_overlay'></div>");
            $("body").append(overlay);
            options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                $(this).click(function (e) {
                    var modal_id = $(this).attr("href");
                    $("#lean_overlay").click(function () {
                        close_modal(modal_id)
                    });
                    $(o.closeButton).click(function () {
                        close_modal(modal_id)
                    });
                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();
                    $("#lean_overlay").css({
                        "display": "block",
                        opacity: 0
                    });
                    $("#lean_overlay").fadeTo(200, o.overlay);
                    $(modal_id).css({
                        "display": "block",
                        "position": "fixed",
                        "opacity": 0,
                        "z-index": 11000,
                        "left": 50 + "%",
                        "margin-left": -(modal_width / 2) + "px",
                        "top": o.top + "px"
                    });
                    $(modal_id).fadeTo(200, 1);
                    e.preventDefault()
                })
            });

            function close_modal(modal_id) {
                $("#lean_overlay").fadeOut(200);
                $(modal_id).css({
                    "display": "none"
                })
            }
        }
    })
})(jQuery);

$(function () {
    $('a[rel*=popup]').leanModal({
        top: 200,
        closeButton: ".popup-close"
   ...