نمایش پیغام با تغییر رنگ پس زمینه

Question

سلام

احتمالا توی یه سری سایت ها رفتید که وقتی میخوان یه پیغامی نمایش بدن، صفحه ی قبل کمرنگ میشه و پیغامشون، توی یک کادر به نمایش در میاد.

یا مثلا کادری رو باز میکنن که صفحه ی زمینه، پشت اون کادر کمرنگ هست و پیغام رو توی اون کادر مینویسن.

میخواستم بپرسم که اصولا چه طوری این کار رو میکنن و با چه زبانی؟؟؟

Comments

جاوا اسکریپت

---

کدش چی هست؟

Answer 1

دو تا کلاس تعریف میکنیم با این خصوصیات:

.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