دو تا کلاس تعریف میکنیم با این خصوصیات:
.dim{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
left: 0;
top: 0;
display: none;
}
.modal{
position: fixed;
width: 300px;
left: 50%;
top: 50%;
margin: -50px 0 0 -150px;
background: #FFF;
border-radius: 10px;
padding: 20px;
}
حالا کد html مشابه این مینویسیم:
<div class="dim">
<div class="modal">
Hello
</div>
</div>
حالا یه دکمه میزاریم تا موقع کلیک اون با کد jquery عنصری که کلاس dim داره رو نمایش بدیم:
<script>
$("#modal").click(function() {
$(".dim").css("display", "block");
});
</script>
توضیح:
یه المنت داریم که تمام صفحه است و رنگ پس زمینه اش نیمه کدره.
یه المنت هم داریم که وسط چینش کردیم و متنی رو که قراره نمایش داده بشه رو داخل اون میزاریم.
نکته: هردوی این المنت ها یا باید خاصیت absolute داشته باشن و یا fixed