JSFiddle - React, Tailwind, and code Playground

HTML

<a rel="leanModal" href="#signup">Button</a>
<div style="height:700px;"></div>
text for scroll...

<div id="signup">
    any text
    <div style="height:900px;"></div>
    rest text that must enable NEW scroll down and ends when #signup ends
</div>

CSS

.wrap{
position:absolute;
top: 0px;
left: 0px;
    width:100%;
    height:100%;
    display:none;
    overflow:auto;
}
#lean_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom:0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#signup {
    position: relative;
	width: 300px;
	padding: 30px; 
	display: none;
	background: #FFF;
	border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}

JavaScript

$(function() {
  
    // leanModal v1.1 by Ray Stone - http://finelysliced.com.au
    // Dual licensed under the MIT and GPL
    $.fn.extend({ 
        leanModal: function(options) {
            var defaults = {
                top: 50,
                overlay: 0.6,
                bg: '#000',
                closeButton: null
            };
            var wrap= $("<div class='wrap'></div>");
            var overlay = $("<div id='lean_overlay'></div>");
            $("body").append(wrap);
            wrap.append(overlay);
            options =  $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                $(this).click(function(e) {
                  	var modal_id = $(this).attr("href");
                    $("body").css('overflow', 'hidden');
                    wrap.css("display","block");
    				$("#lean_overlay").click(function() { 
                         close_modal(modal_id);                    
                    });
                    
                    $(o.closeButton).click(function() { 
                         close_modal(modal_id);                    
                    });
                    wrap.append($(modal_id));
                   
                  	var modal_height = $(modal_id).outerHeight();
            	  	var modal_width = $(modal_id).outerWidth();

            		$('#lean_overlay').css({ 'display' : 'block', opacity : 0, background: o.bg });
                   
            		$('#lean_overlay').fadeTo(200,o.overlay);

            		$(modal_id).css({ 
            			'display' : 'block',
            			'position' : 'absolute',
            			'opacity' : 0,
            			'z-index': 11000,
            			'left' : 50 + '%',
            			'margin-left' : -(modal_width/2) + "px",
            			'top' : o.top + "px"
            		});
$('#lean_overlay').height(wrap.height());
            		$(modal_id).fadeTo(200,1); overlay.css("height",wrap[0].scrollHeight);
                   ...