JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<button>open modal</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat labore quibusdam consequuntur optio necessitatibus temporibus fugit inventore veritatis eum obcaecati quo voluptatum reprehenderit quasi odio earum atque et. Ullam!</p><p>Lorem...

CSS

.mask{
    background-color:rgba(0,0,0,0.7);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
}
.modal{
    position:absolute;
    overflow: auto;
    height:100%;
    width:100%;
}
.modal-inner{
    width:200px;
    margin:0 auto;
    background-color:#fff;
}

button{
    position:fixed;
    top:50px;
}

JavaScript

$('button').click(function(){
    $('.mask').fadeIn(500);
    $('body').css('overflow','hidden');
})

$('.mask').click(function(){
    $(this).fadeOut(500);
    $('body').css('overflow','auto');
})