I Think It Is Best!
And Use The Simple JS to make this work.
<script>
function privacypolicy(){
var privacypolicy1 = document.getElementById('privacypolicy');
var privacypolicy2 = ('display: inline;');
privacypolicy1.style= privacypolicy2;
}
function hideprivacypolicy(){
var privacypolicy1 = document.getElementById('privacypolicy');
var privacypolicy2 = ('display: none;');
privacypolicy1.style= privacypolicy2;
}
</script>
<style type="text/css">
.orthi-textlightbox-background{
background-color: rgba(30, 23, 23, 0.82);
font-family: siyam rupali;
position: fixed; top:0px;
bottom:0px;
right:0px;
width: 100%;
border: none;
margin:0;
padding:0;
overflow: hidden;
z-index:999999;
height: 100%;
}
.orthi-textlightbox-area {
background-color: #fff;
position: absolute;
width: 50%;
left: 300px;
top: 200px;
padding: 20px 10px;
border-radius: 6px;
}
.orthi-textlightbox-area-close{
font-weight: bold;
background-color:black;
color: white;
border-radius: 50%;
padding: 10px;
float: right;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
</style>
<button onclick="privacypolicy()">Show Content</button>
<div id="privacypolicy" class="orthi-textlightbox-background" style="display:none;">
<div class="orthi-textlightbox-area">
LOL<button class="orthi-textlightbox-area-close" onclick="hideprivacypolicy()">×</button>
</div>
</div>