JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div class="myBoxInner">
<div class="myBox">
  <div class="myBox-header">
  <a href="#" class="closeBox">&times;</a>
  </div>
  <div class="myBox-entry">
متن توضیح متن توضیح متن توضیح متن توضیح متن توضیح متن توضیح متن توضیح متن توضیح
</div>
</div>
</div>
<div class="item"><button>توضیحات</button></div>

CSS

html {
	direction:rtl
}
a {
color:#888;
text-decoration:none;
}
a:hover {
color:#000;
}
.myBoxInner {
position:fixed;
display:block;
left:0;
right:0;
top:0;
bottom:0;
padding:10% 25%;
background-color:rgba(0, 0, 0, .5);
z-index:999999;
}
.myBox {
display:block;
padding:0;
background-color:azure;
overflow:hidden;
border-radius:6px;
position:relative;
margin-top:-100%;
}
.myBox-header {
display:block;
background-color:aliceblue;
padding:10px;
border-bottom:1px #FFF solid;
}
.myBox-entry {
padding:15px;
font-size:18px;
margin-bottom:100px;
border-top:1px #D5EBFF solid;
}
button {float:left}

JavaScript

$(document).ready(function() {
$(".myBoxInner,.myBox").hide();
$("button").click(function() {
$(".myBoxInner").fadeIn(1000).find(".myBox").css({
	'marginTop'	:	'-100%',
}).delay(1200).fadeIn(100).animate({
	'marginTop'	:	'0',
},500);
});
$(".closeBox").click(function() {
$(this).parents(".myBox").fadeOut(500).parent(".myBoxInner").delay(200).fadeOut(800);
})
});