کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها

رفیق برنامه‌نویس، تا حالا شده بخوای یه مودال بزاری وسط صفحه و دلت بخواد بک‌گراندش یه حال دیگه داشته باشه؟ منظورم اون افکت بلور خفنیه که تمرکز کاربر رو میاره روی مودال و همه چیزای دیگه رو محو می‌کنه. اگه دنبال کدهای آماده و راهکارهای ناب برای این کار هستی، دقیقاً جای درستی اومدی. این مقاله قراره دستت رو بگیره و از صفر تا صد پیاده‌سازی یه افکت بلور حرفه‌ای برای پس‌زمینه مودال‌ها رو بهت یاد بده، طوری که هم شیک باشه و هم پرفورمنسش رو هوا نره. راستی، برای پیدا کردن کلی اسنیپت و ابزارهای برنامه‌نویسی کاربردی، حتماً یه سر به فروشگاه ابزارهای ما بزن. از دستش نده، چون حسابی به دردت می‌خوره!

🗺️ نقشه راه بلور پس‌زمینه مودال‌ها

1️⃣ چرا بلور؟

افزایش فوکوس کاربر
تجربه کاربری بصری
ایجاد عمق در UI

2️⃣ روش‌های پیاده‌سازی

CSS Filter (راحت‌ترین)
SVG Filters (کنترل بیشتر)
JS Fallback (برای مرورگرهای قدیمی)

3️⃣ چالش‌ها و راه‌حل

پرفورمنس (Hardware Acceleration)
پشتیبانی مرورگر (Fallback)
محتوای بلور نشده (Parent/Child)

4️⃣ عیب‌یابی سریع

بررسی `filter` و `z-index`
مشکلات `position`
بهینه‌سازی رسپانسیو

چرا بلور برای مودال‌ها اینقدر مهمه؟

اصلاً چرا باید برای پس‌زمینه مودال‌ها از افکت بلور استفاده کنیم؟ دلیل اصلیش برمی‌گرده به تجربه کاربری (UX) و چگونگی هدایت چشم کاربر. وقتی یه مودال رو روی صفحه باز می‌کنی، می‌خوای تمام توجه کاربر روی محتوای اون مودال باشه، نه روی چیزای دیگه تو پس‌زمینه. بلور دقیقاً همین کارو می‌کنه. با یه کم تار کردن پس‌زمینه، به صورت بصری یه لایه عمق ایجاد می‌کنی که باعث میشه مودال برجسته‌تر دیده بشه.

افزایش فوکوس: بلور باعث میشه عوامل حواس‌پرتی تو پس‌زمینه کاهش پیدا کنه و کاربر فقط روی مودال تمرکز کنه.
زیبایی بصری: یه طراحی مدرن و شیک به رابط کاربری میده که حس حرفه‌ای بودن رو القا می‌کنه.
ایجاد سلسله مراتب: به کاربر می‌فهمونه که محتوای مودال در حال حاضر مهم‌ترین بخش صفحه است.
بافت و عمق: کمک می‌کنه رابط کاربری تخت و بی‌روح نباشه و حس عمق و بعد بهش بده.

روش‌های پیاده‌سازی افکت بلور: از ساده تا پیشرفته

برای اعمال افکت بلور روی پس‌زمینه مودال، چند تا روش مختلف وجود داره که هر کدوم مزایا و معایب خودشون رو دارن. از ساده‌ترین و پرکاربردترین روش (CSS filter) شروع می‌کنیم و بعد میریم سراغ گزینه‌های دیگه.

1. بلور با CSS خالص (Background-filter) – قهرمان میدان!

راحت‌ترین، پرفورمنس‌ترین و مدرن‌ترین روش برای ایجاد افکت بلور، استفاده از ویژگی backdrop-filter در CSS هست. این ویژگی بهت اجازه میده فیلترهای گرافیکی (مثل بلور، روشنایی، کنتراست) رو روی منطقه‌ای که پشت یک عنصر قرار گرفته اعمال کنی. یعنی محتوای خود عنصر تحت تأثیر قرار نمی‌گیره، فقط چیزی که زیرشه!

کد CSS برای بلور پس‌زمینه مودال:


.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* یه لایه تیرگی نیمه شفاف */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* مطمئن شو که روی بقیه عناصر قرار میگیره */
    
    /* 📌 جادوی اصلی اینجاست: بلور کردن پس‌زمینه */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* برای مرورگرهای WebKit */
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* مودال باید روی بک‌دراپ باشه */
    max-width: 90%;
    width: 500px;
    box-sizing: border-box;
}

همین! به همین سادگی با دو خط کد backdrop-filter و پیشوند -webkit-backdrop-filter (که برای پشتیبانی بهتر تو مرورگرهای بر پایه WebKit مثل سافاری لازمه) تونستی یه افکت بلور خفن ایجاد کنی.

مزایا و معایب `backdrop-filter`:

پرفورمنس عالی: چون مرورگر این کار رو مستقیم روی GPU انجام میده، خیلی سریع و روونه.
پیاده‌سازی ساده: فقط با چند خط CSS کار راه میفته.
محتوای خود عنصر تحت تأثیر نیست: فقط زیرش بلور میشه.

پشتیبانی مرورگر: اکثر مرورگرهای مدرن پشتیبانیش می‌کنن، ولی مرورگرهای قدیمی‌تر ممکنه مشکل داشته باشن. (جدول زیر رو ببین).

2. بلور با JavaScript و Fallback (برای مرورگرهای قدیمی)

اگه نگران پشتیبانی backdrop-filter تو مرورگرهای قدیمی هستی، می‌تونی از راه‌حل‌های جاوااسکریپتی یا ترکیبی استفاده کنی. روش معمول اینه که با JS چک کنی ببین مرورگر از backdrop-filter پشتیبانی می‌کنه یا نه. اگه نکرد، یه fallback (راه‌حل جایگزین) رو اجرا کنی.

یکی از روش‌های قدیمی‌تر اینه که کل محتوای پشت مودال رو با CSS filter: blur() بلور کنی. اما مشکل این روش اینه که چون عنصر بلورشده، کل محتوای صفحه رو شامل میشه، پرفورمنسش خوب نیست و حتی ممکنه محتوای خود مودال هم تحت تأثیر قرار بگیره مگه اینکه مراقب باشی.

نمونه JS برای بررسی پشتیبانی و اعمال کلاس:


function supportsBackdropFilter() {
    return CSS.supports('backdrop-filter', 'blur(1px)') || CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
}

function openModal() {
    const modalBackdrop = document.getElementById('modalBackdrop');
    const body = document.body;

    modalBackdrop.style.display = 'flex';
    body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی

    if (!supportsBackdropFilter()) {
        body.classList.add('blurred-background-fallback'); // Fallback برای کل صفحه
        console.log('Backdrop filter not supported, using fallback.');
    } else {
        console.log('Backdrop filter supported.');
    }
}

function closeModal() {
    const modalBackdrop = document.getElementById('modalBackdrop');
    const body = document.body;

    modalBackdrop.style.display = 'none';
    body.style.overflow = ''; 

    if (!supportsBackdropFilter()) {
        body.classList.remove('blurred-background-fallback');
    }
}

// برای تست، یه دکمه در HTML بذار:
// <button onclick="openModal()">باز کردن مودال</button>
// <div id="modalBackdrop" class="modal-backdrop" style="display: none;">
//     <div class="modal-content">
//         <h2>این یه موداله!</h2>
//         <p>محتوای جذاب مودال شما اینجا قرار می‌گیره.</p>
//         <button onclick="closeModal()">بستن</button>
//     </div>
// </div>

CSS Fallback (فیلتر روی کل Body):


.blurred-background-fallback {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

/* نکته مهم: این حالت میتونه عملکرد ضعیفی داشته باشه و محتوای مودال هم بلور کنه */
/* برای جلوگیری از بلور شدن مودال، باید مودال بیرون از body بلور شده باشه یا از فیلتر منفی استفاده کنی */
/* یا کلا این روشو برای بک‌فیلتر ترجیح بدی و از اینفیلتر برای هر چیزی استفاده کنی */

همین‌طور که گفتم، استفاده از filter: blur() روی کل body، بهترین راه‌حل نیست چون ممکنه پرفورمنس رو پایین بیاره و حتی روی محتوای مودال هم اثر بذاره مگر اینکه حواست به z-indexها و ساختار HTML باشه.

جدول مقایسه پشتیبانی مرورگرها برای Backdrop-Filter:

ویژگی	مرورگرها (پشتیبانی خوب)
`backdrop-filter`	Chrome (>= 51), Edge (>= 17), Firefox (>= 70), Safari (>= 9), Opera (>= 40)
`filter` (روی عنصر اصلی)	همه مرورگرهای مدرن و حتی قدیمی‌تر (IE 10+ با -ms-filter)

3. بلور با SVG فیلترها (پیشرفته و کنترل‌پذیرتر)

اگه دنبال کنترل دقیق‌تر روی افکت بلور هستی یا می‌خوای افکت‌های پیچیده‌تری رو پیاده کنی، SVG Filters یه گزینه عالیه. با SVG می‌تونی فیلتر بلور (Gaussian blur) رو تعریف کنی و بعد با CSS اون فیلتر رو روی عناصر HTML اعمال کنی. این روش کمی پیچیده‌تره ولی انعطاف‌پذیری زیادی بهت میده.

کد SVG Filter:


<svg style="position: absolute; width: 0; height: 0;">
    <defs>
        <filter id="blur-modal-bg">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </defs>
</svg>

این کد SVG رو باید اول فایل HTMLت (مثلاً بعد از <body>) قرار بدی. stdDeviation مقدار تاری رو مشخص می‌کنه.

اعمال فیلتر با CSS:


.modal-backdrop.svg-blur {
    /* فقط برای مرورگرهایی که backdrop-filter ندارن */
    filter: url(#blur-modal-bg);
    -webkit-filter: url(#blur-modal-bg);
}

بعد می‌تونی با جاوااسکریپت و همون منطق قبلی، اگه backdrop-filter پشتیبانی نشد، کلاس .svg-blur رو به .modal-backdrop اضافه کنی. این روش هم برای کدهای CSS پیشرفته‌تر و هم برای کنترل دقیق‌تر روی انیمیشن‌های فیلتر خیلی کارآمده.

گام به گام: پیاده‌سازی کامل بلور پس‌زمینه برای مودال

حالا که با روش‌ها آشنا شدی، بیا یه مودال کامل رو با افکت بلور از صفر پیاده‌سازی کنیم. این روش بهترین پرفورمنس رو داره و از backdrop-filter استفاده می‌کنه.

1. ساختار HTML پایه

اول یه دکمه برای باز کردن مودال و خود مودال رو داخل HTML تعریف می‌کنیم. مودال شامل یک لایه پس‌زمینه (backdrop) و محتوای اصلی مودال (content) میشه.

کد HTML:


<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>افکت بلور مودال</title>
    <link rel="stylesheet" href="style.css"> <!-- فایل CSS رو اینجا لینک کن -->
</head>
<body>
    <div class="page-content">
        <h1>صفحه اصلی ما</h1>
        <p>اینجا یه عالمه متن و محتوای جذاب داریم.</p>
        <button id="openModalBtn">باز کردن مودال بلور</button>
        <p>متن بیشتر برای اینکه بلور شدن رو بهتر ببینی...</p>
        <img src="https://picsum.photos/800/600?random=1" alt="پس‌زمینه" style="width: 100%; max-width: 600px; display: block; margin: 20px auto; border-radius: 8px;">
        <p>می‌دونی چی میگم؟</p>
    </div>

    <!-- ساختار مودال -->
    <div id="myModal" class="modal-backdrop">
        <div class="modal-content">
            <h2>خوش اومدی رفیق!</h2>
            <p>این یه مودال با پس‌زمینه تار شده است. چطوره؟</p>
            <button class="close-modal-btn">بستن مودال</button>
            <p style="margin-top: 20px; font-size: 0.9em; color: #666;">سوالی داری؟ می‌تونی با ما تماس بگیری: <a href="tel:09202232789" style="color: #007bff; text-decoration: none;">09202232789</a></p>
        </div>
    </div>

    <script src="script.js"></script> <!-- فایل JavaScript رو اینجا لینک کن -->
</body>
</html>

2. استایل‌دهی CSS اصلی (`style.css`)

حالا وقتشه که به مودال و پس‌زمینه‌اش جون بدیم. یادت باشه، modal-backdrop باید کل صفحه رو بگیره و روی اون بلور رو اعمال کنیم. کدهای وردپرس هم می‌تونن از همین اصول پیروی کنن.

کد CSS:


body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: right; /* برای راست‌چین */
    background-color: #f4f7f9;
    color: #333;
}

.page-content {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

h1, h2, h3 {
    color: #1a2a47;
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #0056b3;
}

/* 📌 استایل‌های مودال */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* لایه تیرگی */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* برای انیمیشن محو شدن اولیه */
    visibility: hidden; /* پنهان بودن در حالت اولیه */
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* 💥 هسته بلور پس‌زمینه 💥 */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* برای سازگاری */
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 1001; /* باید بالاتر از بک‌دراپ باشه */
    max-width: 90%;
    width: 550px;
    box-sizing: border-box;
    transform: translateY(-20px); /* برای انیمیشن ورود */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: right;
}

.modal-backdrop.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.close-modal-btn {
    background-color: #dc3545;
    margin-top: 25px;
}

.close-modal-btn:hover {
    background-color: #c82333;
}

/* 📱💻📺 رسپانسیو بودن */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 20px;
    }
    .modal-backdrop {
        backdrop-filter: blur(5px); /* بلور کمتر برای موبایل */
        -webkit-backdrop-filter: blur(5px);
    }
    .page-content {
        margin: 15px auto;
        padding: 15px;
    }
}

3. منطق JavaScript برای نمایش/پنهان کردن (`script.js`)

حالا وقتشه با جاوااسکریپت به دکمه‌ها و مودال جون بدیم تا کار کنن. می‌تونی کدهای JS مفید دیگه رو هم از سایت ما ببینی.

کد JavaScript:


document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openModalBtn');
    const myModal = document.getElementById('myModal');
    const closeModalBtn = document.querySelector('.close-modal-btn');
    const body = document.body;

    // تابع برای باز کردن مودال
    openModalBtn.addEventListener('click', () => {
        myModal.classList.add('show');
        body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی
    });

    // تابع برای بستن مودال
    const closeModal = () => {
        myModal.classList.remove('show');
        body.style.overflow = ''; // فعال کردن مجدد اسکرول صفحه اصلی
    };

    closeModalBtn.addEventListener('click', closeModal);

    // بستن مودال با کلیک روی پس‌زمینه (نه روی محتوای مودال)
    myModal.addEventListener('click', (e) => {
        if (e.target === myModal) {
            closeModal();
        }
    });

    // بستن مودال با کلید Escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && myModal.classList.contains('show')) {
            closeModal();
        }
    });
});

4. بهینه‌سازی و نکات حرفه‌ای

حتی بهترین کد هم می‌تونه بهتر بشه. این نکات بهت کمک می‌کنه یه مودال پرفورمنس بالا و کاربرپسند داشته باشی:

Hardware Acceleration: ویژگی backdrop-filter به صورت خودکار از GPU استفاده می‌کنه که باعث میشه انیمیشن‌ها و افکت بلور خیلی روون‌تر باشن. این یه مزیت بزرگ نسبت به استفاده از filter: blur() روی کل صفحه است.
پشتیبانی مرورگر: همیشه با Can I use… چک کن که چه مرورگرهایی از ویژگی‌هات پشتیبانی می‌کنن. اگه نیاز به پشتیبانی گسترده‌تر داشتی، حتماً از @supports در CSS یا منطق جاوااسکریپت برای Fallback استفاده کن.
Accessibility (دسترسی‌پذیری):
- وقتی مودال باز میشه، aria-modal="true" و role="dialog" رو به عنصر مودالت اضافه کن.
- مطمئن شو که کاربر می‌تونه با کلید Tab فقط بین عناصر داخل مودال جابه‌جا بشه (Trap Focus).
- امکان بستن مودال با کلید Escape رو حتماً فراهم کن.
رسپانسیو بودن: همونطور که تو کد CSS دیدی، برای موبایل می‌تونی میزان بلور رو کمتر کنی تا حس بهتری بده. مطمئن شو که مودالت تو اندازه‌های مختلف صفحه نمایش خوب دیده میشه و محتواش بهم نمی‌ریزه. کدهای HTML باید طوری باشه که منعطف باشه.

چالش‌ها و راه‌حل‌ها در پیاده‌سازی بلور

معمولاً تو هر پیاده‌سازی یه چالش‌هایی پیش میاد. بیا چندتا از رایج‌ترینشون رو بررسی کنیم:

مشکل 1: عدم پشتیبانی مرورگرهای قدیمی

سناریو: کاربر با یه مرورگر قدیمی وارد سایت میشه و افکت بلور رو نمی‌بینه.

راه‌حل: همونطور که بالاتر اشاره شد، می‌تونی از Fallback استفاده کنی.

CSS @supports: می‌تونی تو CSS بررسی کنی که آیا مرورگر از backdrop-filter پشتیبانی می‌کنه یا نه. اگه نکرد، یه background-color ساده یا یه لایه تیرگی بدون بلور رو نشون بدی.
JavaScript Feature Detection: با JS تشخیص بدی و یه کلاس خاص رو به body یا خود modal-backdrop اضافه کنی و تو CSS بر اساس اون کلاس، استایل Fallback رو اعمال کنی.

نمونه CSS با @supports:


.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6); /* Fallback پیش فرض */
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.4); /* شفافیت کمتر وقتی بلور هست */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

مشکل 2: افت پرفورمنس

سناریو: صفحه کند میشه یا انیمیشن‌ها لگ دارن.

راه‌حل:

استفاده از backdrop-filter: این روش به دلیل استفاده از GPU، بهترین پرفورمنس رو داره.
مقدار بلور رو کم کن: بلورهای خیلی زیاد (مثلاً blur(20px)) می‌تونن سنگین باشن. معمولاً blur(5px) تا blur(10px) کافیه و خوب کار می‌کنه.
فقط در صورت نیاز اعمال کن: بلور رو فقط وقتی مودال بازه فعال کن و بعد از بسته شدن، بردارش. این کار با کلاس‌های .show و .hide تو CSS انجام میشه.

مشکل 3: محتوای مودال هم بلور میشه!

سناریو: مودال باز میشه، ولی محتوای داخل خود مودال (متن، دکمه‌ها) هم تار به نظر میرسه.

راه‌حل: این مشکل معمولاً وقتی پیش میاد که از filter: blur() روی عنصر والد (Parent) استفاده می‌کنی و عنصر فرزند (Child) که همون محتوای مودال باشه، هم تحت تاثیر قرار میگیره.

استفاده از backdrop-filter: با backdrop-filter این مشکل رو نداری، چون فقط روی چیزی که *پشت* عنصر قرار گرفته اعمال میشه.
جداسازی عناصر: اگه مجبوری از filter استفاده کنی، مطمئن شو که مودال (یعنی .modal-content) یه عنصر کاملاً جدا از عنصر بلور شده (.modal-backdrop) باشه و فقط روی اون بک‌دراپ بلور رو اعمال کنی، نه روی یه عنصر والد مشترک. همچنین z-index مودال باید بالاتر از بک‌دراپ باشه.

مشکل 4: بلور روی تصاویر یا ویدیوها

سناریو: وقتی پس‌زمینه تصویر یا ویدیو داره، بلور کردنش ممکنه بیش از حد سنگین بشه یا ظاهر عجیبی پیدا کنه.

راه‌حل:

لایه میانی: می‌تونی یه div خالی رو به عنوان بک‌دراپ بین تصویر/ویدیو پس‌زمینه و مودال اصلی قرار بدی و فقط روی این div میانی، backdrop-filter رو اعمال کنی.
بلور کمتر: برای تصاویر و ویدیوهای شلوغ، ممکنه بلور کمتر (مثلاً blur(3px)) نتیجه بهتری بده.

مشکل 5: مسائل رسپانسیو (در اندازه‌های متفاوت صفحه نمایش)

سناریو: مودال تو موبایل زیادی بزرگ میشه، محتواش خوب دیده نمیشه، یا بلور تو صفحات کوچک حس خوبی نمیده.

راه‌حل:

Media Queries: با استفاده از @media کوئری‌ها، می‌تونی استایل‌های خاصی رو برای مودال و بک‌دراپ تو اندازه‌های مختلف صفحه نمایش اعمال کنی. مثلاً برای موبایل width: 95% برای مودال و بلور کمتر برای بک‌دراپ.
واحد‌های منعطف: از واحدهای نسبی مثل %، vw، vh و rem به جای px استفاده کن تا المان‌ها به خوبی با اندازه صفحه تطبیق پیدا کنن.

عیب‌یابی سریع (Troubleshooting)

اگه افکت بلور درست کار نمی‌کنه یا مشکلی داره، این بخش بهت کمک می‌کنه سریع دلیلشو پیدا کنی:

بلور اصلاً اعمال نمیشه؟
- مطمئن شو که مرورگرت از backdrop-filter پشتیبانی می‌کنه. تو Can I use چک کن.
- آیا از -webkit-backdrop-filter هم استفاده کردی؟ این برای برخی مرورگرها مثل سافاری لازمه.
- مطمئن شو که عنصر .modal-backdrop حداقل یه background-color (حتی نیمه شفاف) داره. backdrop-filter روی پس‌زمینه‌های کاملاً شفاف کار نمی‌کنه.
- بررسی کن که z-index مودال و بک‌دراپ درست تنظیم شده باشه و بک‌دراپ بین مودال و محتوای اصلی باشه.
محتوای خود مودال هم بلور شده؟
- این معمولاً نشونه اینه که از filter: blur() روی والد مودال استفاده کردی به جای backdrop-filter روی بک‌دراپ.
- مطمئن شو که .modal-content یه عنصر فرزند از .modal-backdrop نیست و فقط روی بک‌دراپ فیلتر رو اعمال کردی.
پرفورمنس پایینه یا لگ داره؟
- مقدار blur رو کمتر کن (مثلاً از 8px به 5px).
- اطمینان حاصل کن که فقط وقتی مودال بازه، بلور فعال میشه و وقتی بسته میشه، غیرفعال میشه.
- از will-change: backdrop-filter; استفاده نکن، چون مرورگرها معمولاً این بهینه‌سازی رو خودشون انجام میدن و ممکنه برعکس تاثیر منفی داشته باشه.
مودال از position: fixed یا absolute پیروی نمی‌کنه؟
- عناصر والد رو چک کن. اگه یکی از والدها transform، perspective، یا filter داشته باشه، می‌تونه روی fixed بودن عنصر فرزند تأثیر بذاره. مودال رو مستقیم زیر body قرار بده.

نتیجه‌گیری

خوشحالم که تا اینجا باهام بودی! حالا دیدی که چقدر راحت می‌تونی با چند خط کد CSS و یه کم جاوااسکریپت، یه افکت بلور شیک و پرفورمنس بالا برای پس‌زمینه مودال‌هات ایجاد کنی. این کار نه تنها به زیبایی رابط کاربریت اضافه می‌کنه، بلکه تجربه کاربری رو هم حسابی بهبود میده. یادت نره که همیشه بهترین و مدرن‌ترین روش‌ها رو انتخاب کنی و برای سازگاری با مرورگرهای قدیمی‌تر هم فکری داشته باشی.

اگه دنبال کدهای آماده و اسنیپت‌های برنامه‌نویسی بیشتری هستی، حتماً یه سر به بلاگ و بخش اسنیپت‌های ما بزن. کلی کدهای پایتون، CSS، JavaScript و HTML اونجا منتظرته. هر کدوم از این‌ها می‌تونه تو پروژه‌های بعدیت حسابی به کارت بیاد. موفق باشی رفیق!

پرسش‌های متداول (FAQ)

آیا استفاده از افکت بلور پرفورمنس سایت رو کاهش میده؟

اگه از ویژگی backdrop-filter با مقدار بلور کم استفاده کنی، به دلیل استفاده از GPU، معمولاً پرفورمنس خیلی خوبی داره و افت محسوسی ایجاد نمی‌کنه. اما اگه از روش‌های قدیمی‌تر مثل filter: blur() روی کل صفحه استفاده کنی، ممکنه افت پرفورمنس داشته باشی.

چطور می‌تونم مطمئن بشم که مودال بلور شده روی همه مرورگرها کار می‌کنه؟

بهترین راه اینه که از @supports در CSS یا منطق جاوااسکریپت برای تشخیص پشتیبانی backdrop-filter استفاده کنی. اگه مرورگر از این ویژگی پشتیبانی نکرد، یه راه‌حل جایگزین (Fallback) مثل یک لایه تیرگی ساده رو به جای بلور نشون بده.

آیا افکت بلور روی دستگاه‌های موبایل هم خوب نمایش داده میشه؟

بله، با استفاده از @media کوئری‌ها در CSS، می‌تونی میزان بلور و استایل مودال رو برای دستگاه‌های موبایل بهینه کنی تا تجربه کاربری بهتری داشته باشه. مثلاً می‌تونی میزان بلور رو برای صفحات کوچک‌تر کمتر در نظر بگیری.

چطور می‌تونم از بلور شدن محتوای خود مودال جلوگیری کنم؟

ویژگی backdrop-filter به صورت ذاتی فقط پس‌زمینه را بلور می‌کند و محتوای عنصر اعمال شده را تحت تأثیر قرار نمی‌دهد. مطمئن شو که بلور را روی لایه پس‌زمینه (مثل .modal-backdrop) اعمال می‌کنی و محتوای مودال (مثل .modal-content) یک عنصر جداگانه با z-index بالاتر است.

{
“@context”: “https://schema.org”,
“@type”: “Article”,
“headline”: “کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها”,
“image”: [
“https://picsum.photos/1200/600?random=blur-modal”,
“https://picsum.photos/800/400?random=blur-effect”,
“https://picsum.photos/600/300?random=modal-background”
],
“datePublished”: “2023-10-27T09:00:00+08:00”,
“dateModified”: “2023-10-27T09:00:00+08:00”,
“author”: {
“@type”: “Person”,
“name”: “FA Tools Expert”
},
“publisher”: {
“@type”: “Organization”,
“name”: “FA Tools”,
“logo”: {
“@type”: “ImageObject”,
“url”: “https://fa-tools.ir/logo.png”
}
},
“description”: “در این مقاله جامع، بهترین کدهای آماده و روش‌های پیاده‌سازی افکت بلور (Blur Effect) برای تار کردن پس‌زمینه مودال‌ها را بررسی می‌کنیم. با راهکارهای CSS، JavaScript و SVG، پرفورمنس بالا و سازگاری با مرورگرها را تجربه کنید و UX سایت خود را بهبود بخشید.”,
“keywords”: “افکت بلور، Blur Effect, مودال، تار کردن پس‌زمینه، CSS Backdrop-Filter, کدهای آماده، جاوااسکریپت بلور، SVG Filter, UI/UX”
}

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “آیا استفاده از افکت بلور پرفورمنس سایت رو کاهش میده؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “اگه از ویژگی `backdrop-filter` با مقدار بلور کم استفاده کنی، به دلیل استفاده از GPU، معمولاً پرفورمنس خیلی خوبی داره و افت محسوسی ایجاد نمی‌کنه. اما اگه از روش‌های قدیمی‌تر مثل `filter: blur()` روی کل صفحه استفاده کنی، ممکنه افت پرفورمنس داشته باشی.”
}
},
{
“@type”: “Question”,
“name”: “چطور می‌تونم مطمئن بشم که مودال بلور شده روی همه مرورگرها کار می‌کنه؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “بهترین راه اینه که از `@supports` در CSS یا منطق جاوااسکریپت برای تشخیص پشتیبانی `backdrop-filter` استفاده کنی. اگه مرورگر از این ویژگی پشتیبانی نکرد، یه راه‌حل جایگزین (Fallback) مثل یک لایه تیرگی ساده رو به جای بلور نشون بده.”
}
},
{
“@type”: “Question”,
“name”: “آیا افکت بلور روی دستگاه‌های موبایل هم خوب نمایش داده میشه؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “بله، با استفاده از `@media` کوئری‌ها در CSS، می‌تونی میزان بلور و استایل مودال رو برای دستگاه‌های موبایل بهینه کنی تا تجربه کاربری بهتری داشته باشه. مثلاً می‌تونی میزان بلور رو برای صفحات کوچک‌تر کمتر در نظر بگیری.”
}
},
{
“@type”: “Question”,
“name”: “چطور می‌تونم از بلور شدن محتوای خود مودال جلوگیری کنم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “ویژگی `backdrop-filter` به صورت ذاتی فقط پس‌زمینه را بلور می‌کند و محتوای عنصر اعمال شده را تحت تأثیر قرار نمی‌دهد. مطمئن شو که بلور را روی لایه پس‌زمینه (مثل `.modal-backdrop`) اعمال می‌کنی و محتوای مودال (مثل `.modal-content`) یک عنصر جداگانه با `z-index` بالاتر است.”
}
}
]
}

کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها

🗺️ نقشه راه بلور پس‌زمینه مودال‌ها

چرا بلور برای مودال‌ها اینقدر مهمه؟

روش‌های پیاده‌سازی افکت بلور: از ساده تا پیشرفته

1. بلور با CSS خالص (Background-filter) – قهرمان میدان!

مزایا و معایب backdrop-filter:

2. بلور با JavaScript و Fallback (برای مرورگرهای قدیمی)

جدول مقایسه پشتیبانی مرورگرها برای Backdrop-Filter:

3. بلور با SVG فیلترها (پیشرفته و کنترل‌پذیرتر)

گام به گام: پیاده‌سازی کامل بلور پس‌زمینه برای مودال

1. ساختار HTML پایه

2. استایل‌دهی CSS اصلی (style.css)

3. منطق JavaScript برای نمایش/پنهان کردن (script.js)

4. بهینه‌سازی و نکات حرفه‌ای

چالش‌ها و راه‌حل‌ها در پیاده‌سازی بلور

مشکل 1: عدم پشتیبانی مرورگرهای قدیمی

مشکل 2: افت پرفورمنس

مشکل 3: محتوای مودال هم بلور میشه!

مشکل 4: بلور روی تصاویر یا ویدیوها

مشکل 5: مسائل رسپانسیو (در اندازه‌های متفاوت صفحه نمایش)

عیب‌یابی سریع (Troubleshooting)

نتیجه‌گیری

پرسش‌های متداول (FAQ)

آیا استفاده از افکت بلور پرفورمنس سایت رو کاهش میده؟

چطور می‌تونم مطمئن بشم که مودال بلور شده روی همه مرورگرها کار می‌کنه؟

آیا افکت بلور روی دستگاه‌های موبایل هم خوب نمایش داده میشه؟

چطور می‌تونم از بلور شدن محتوای خود مودال جلوگیری کنم؟

Table of Contents

آخرین نوشته‌ها

دسته‌ها

مزایا و معایب `backdrop-filter`:

2. استایل‌دهی CSS اصلی (`style.css`)

3. منطق JavaScript برای نمایش/پنهان کردن (`script.js`)