JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jinn_page jinn_page-blured">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis...

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.jinn_page {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.jinn_page-blured {
    text-shadow: 0 0 8px black;
    color: transparent;
    color: inherit\9;
    filter: progid:DXImageTransform.Microsoft.MotionBlur(Strength=8, Direction=45), progid:DXImageTransform.Microsoft.MotionBlur(Strength=8, Direction=225);
}
.jinn_popup {
    position:       fixed;
    left:           10%;
    top:            10%;
    right:          10%;
    bottom:         10%;
    z-index:        1;
    text-align:     center;
    vertical-align: middle;
    white-space:    nowrap;
    font:           0/0;
    box-sizing:     border-box;
    -moz-box-sizing:border-box;
}

.jinn_popup ~ .jinn_popup {
    margin: 3em -1em -1em 1em;
}

.jinn_popup ~ .jinn_popup ~ .jinn_popup {
    margin: 6em -2em -2em 2em;
}

.jinn_popup-card {
    display:        block;
    position:       absolute;
    top: 0;
    z-index:        1;
    vertical-align: top;
    border:         1px solid #bbb;
    border-radius:  2px;
    white-space:    normal;
    background:     white;
    min-width:      3em;
    min-height:     3em;
    text-align:     left;
    max-height:     100%;
    overflow:       hidden;
    font:           12px/1.2 'Verdana', sans-serif;
    box-shadow: 1px 1px 6px #aaa;
}

.jinn_popup-head {
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.jinn_popup-body {
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.jinn_popup-foot {
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.jinn_popup-maximize {
    position: fixed;
    display: block;
    left: 5%;
    right: 5%;
    top: 7%;
    bottom: 7%;
}

.jinn_popup-blur {
    content:    '';
    position:   fixed;
    left:       0;
    right:      0;
    top:        0;
    bottom:    ...

JavaScript

$( 'body' ).on( 'click', '.jinn_popup-blur,.jinn_popup-escape', function(){
    $(this).parents('.jinn_popup').remove()
    $('.jinn_page').toggleClass('jinn_page-blured', !!$( '.jinn_popup' ).size() )
} )

$( window ).on( 'resize', function(){
    $( '.jinn_popup' ).each( function( i, popup ){
        popup= $( popup )
        var head= popup.find( '.jinn_popup-head' )
        var body= popup.find( '.jinn_popup-body' )
        var foot= popup.find( '.jinn_popup-foot' )
        
        var maxHeight= popup.height()
        
        head.css({ maxHeight: maxHeight / 2 + 'px' })
        foot.css({ maxHeight: maxHeight / 2 + 'px' })
        
        var maxBodyHeight= maxHeight - head.height() - foot.height()
        maxBodyHeight= Math.max( 64, maxBodyHeight )
        body.css({ maxHeight: maxBodyHeight })
    } )
} )
        
$( window ).trigger( 'resize' )