امیررضا
10 ماه پیش توسط امیررضا مطرح شد
5 پاسخ

فیلتر blur بر روی کل body جز یک div با onClick

سلام
میخوام وقتی روی سرچ بار اینپوتم کلیک میکنم overlay blur اتفاق بیفته ینی کل body بلور بشه جز سرچ بار ( body > :not(#search))
یه چیزی تو مایه های همین سرچ اینپوت راکت اما با blur filter
حتی با استفاده از نوشتن DOM تو خود کامپوننت ری اکتیم هم امتحان کردم اما نشد
ممنون میشم اگر کسی میدونه کمک کنه


ثبت پرسش جدید
مهدی
تخصص : توسعه دهنده فرانت اند
@mehdi8686h 10 ماه پیش آپدیت شد
5

سلام دوست عزیز
z-index بالاتر به به سرچ بار بده
ی نمونه واست زدم:
لینک کدپن


محمد حسین
تخصص : mevn stack
@saghari 10 ماه پیش مطرح شد
0

باید یه div بسازی که هر وقت روی اون اینپوت سرچ کلیک شد اون نمایش داده بشه فکر کنم اینطوری باشه اگه باگ داشت ببخشید خیلی وقته از ری اکت استفاده نکردم

function App() {
const [show, setShow] = useState(false)
return (
{ show && <div className="wrapper bg-gray-700/50 backdrop-blur" onClick={e => setShow(false)}></div> }
<input className="search z-10" onFocus={e => setShow(true)} />
)
}

پویا باقری
تخصص : برنامه نویس وب
@Pouyab 10 ماه پیش مطرح شد
1
const Foo = () => {
const [showOverlay, setShowOverlay] = useState(false);
useEffect(() => {
showOverlay
? document.body.classList.add("overflow-hidden")
: document.body.removeAttribute("class");
return () => document.body.removeAttribute("class");
}, [showOverlay]);
return (
<>
{createPortal(
<div
className={`${!showOverlay && "hidden"} fixed z-10 w-screen h-screen inset-0 backdrop-blur-sm backdrop-brightness-50`}
></div>,
document.body,
)}
<div
className={
"flex flex-col items-center gap-y-4 w-1/2 py-6 mx-auto"
}
>
<input
type="text"
className={
"relative z-20 w-full p-2 border border-zinc-300 focus:outline-none"
}
placeholder={"Search"}
onFocus={() => setShowOverlay(true)}
onBlur={() => setShowOverlay(false)}
/>
<p></p>
</div>
</>
);
};

واسه اینکه کد چندقسمت نشه state رو لوکال نوشتم. state هایی که قرار هست توی کل پروژه ازشون استفاده بشه رو به صورت گلوبال تعریف کنید. useEffect هم واسه اسکرول هست. متن زیادی رو توی تگ p بزارید متوجه میشید چی به چیه


امیررضا
تخصص : برنامه نویس فرانت اند
@amireza437 10 ماه پیش مطرح شد
1

تشکر از هر سه عزیز
@mehdi8686h
@saghari
@Pouyab


ایلیا جلائی
تخصص : برنامه نویس وب
@ilya 10 ماه پیش مطرح شد
0

سلام
به نظر من یک div بساز که کل صفحه رو بگیره و blur باشه
و سرچ بار رو بهش z-index بیشتر از اون div بده


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام