JSFiddle - React, Tailwind, and code Playground

by Anand Jee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainText">
  <div>select * from messages where id=138
select * from MessageConfigOmniChannel where message_id=138
select * from MessageLayouts where message_id=138
select * from messageLayoutversions where MessageLayout_Id  in (select id from MessageLayouts where message_id=138 )
</div>
  <div>select * from messages where id=138
select * from MessageConfigOmniChannel where message_id=138
select * from MessageLayouts where message_id=138
select * from messageLayoutversions where MessageLayout_Id  in (select id from MessageLayouts where message_id=138 )
</div>
  <div>select * from campaigns where id=1276
SELEct * from CampaignConfigBrand where campaigns_id=1276
SELEct * from CampaignConfigLanguage where campaigns_id=1276
SELEct * from CampaignConfigOmniChannel where campaigns_id=1276
</div>
</div>
<input type="submit" id="btn" value="Click Me"/>

CSS

.wantOverlay {
  overflow-y: scroll;
  position: relative;
}

.wantOverlay::before {
  content: '';
  position: fixed;
  width: inherit;
  height: inherit;
  background: rgba(150, 150, 150, .45);
}
#mainText{
  width: 100%;
  height: 100px;
  border:2px solid red;
  display: block;
}

JavaScript

$('#btn').click(function(){
$('#mainText').addClass('wantOverlay');
//$()
});