إغلاق نموذج البحث عند النقر خارج الحقل

تُعتبر النماذج المنبثقة جزءاً شائعاً من تصميم واجهات المستخدم الحديثة، وغالبًا ما تُستخدم لتوفير ميزات مثل البحث السريع. أحد التحديات التي قد تواجهنا عند استخدام نموذج البحث هو كيف يُمكن إغلاق هذا النموذج عندما يقوم المستخدم بالنقر خارج نطاقه. هذا الأمر يُعتبر جزءًا من تحسين تجربة المستخدم وضمان سلاسة التفاعل. في هذا المقال، سنتناول كيفية إغلاق نموذج البحث عند النقر خارجه، ونستعرض بعض الأكواد والفنيات لتحقيق ذلك.

إعداد النموذج والعنصر القابل للإغلاق

للبدء، نقوم بإنشاء DIV ليكون العنصر القابل للإغلاق، والذي سيظهر كطبقة فوقية، مما يسمح لنا بإدراك ما إذا كان المستخدم قد نقر خارج النموذج. من خلال إضافة بعض الأنماط (CSS) لهذا العنصر وضبط موضع النموذج، يمكن أن يبدو كالتالي:

#searchform {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  background: rgb(0 0 0 / 60%);
  z-index: 1;
}

في هذا الكود، قُمنا بتحديد موضع النموذج والأداة القابلة للإغلاق. يتواجد النموذج في منتصف الشاشة بفضل خصائص الترجمة، مما يضمن ظهوراً مرتباً. طبقة التداخل تحتوي على تأثير ضبابي يخلق تجربة مستخدم جذابة.

تفاعل النموذج مع الحدث

الآن نحتاج إلى إضافة بعض الوظائف باستخدام JavaScript لإدارة ظهور وإخفاء النموذج والطبقة. إليك كيف يمكن تنفيذ ذلك:

const searchForm = document.getElementById("searchform");
const overlay = document.getElementById("overlay");
function toggleSearchForm(show = null) {
  const formIsVisible =
    show !== null ? !show : searchForm.style.display === "none";
  searchForm.style.display = formIsVisible ? "none" : "block";
  overlay.style.display = formIsVisible ? "none" : "block";
}
overlay.addEventListener("click", () => toggleSearchForm(false));

في هذا الكود، نقوم بتحديد العناصر المهمة في واجهة المستخدم، وهي النموذج والطبقة العلوية. من خلال وظيفة toggleSearchForm، يمكننا التحكم في ظهور النموذج بناءً على حالة العرض الحالية.

هذه الوظيفة تسمح لنا بتحديد ما إذا كنا نريد إظهار النموذج أو إخفاءه، كما أنها تتفاعل معClicked事件 من الطبقة العلوية، مما يتيح لنا إغلاق نموذج البحث عند النقر في أي مكان خارج النموذج.

أهمية إغلاق النموذج عند النقر خارج حدودها

يعد إغلاق نموذج البحث عند النقر خارج حدودها واحداً من الجوانب الأساسية لتحسين تجربة المستخدم. فحينما يتمكن المستخدم من إغلاق النموذج بسهولة، يُتاح له إمكانية التنقل بحرية أكبر دون الشعور بالارتباك أو التشويش. تُعتبر هذه الميزة، التي يمكن الإشارة إليها أيضًا بعبارات مثل "إخفاء النموذج عند النقر خارج الحدود" و"إنهاء العرض عند الضغط في الخارج"، نجاحًا لواجهة المستخدم.

خاتمة

يُعد استخدام عناصر واجهة المستخدم بشكل يتماشى مع احتياجات المستخدم أمرًا في غاية الأهمية. من خلال تطبيق استراتيجيات مثل إغلاق نموذج البحث عند النقر خارج مجاله، يمكننا تحسين تجربة المستخدم وتقديم واجهة أكثر سلاسة. تحقق من الكود المُقدم أعلاه ودمجه في مشروعك، واستفد من هذه الفكرة لتوفير تجربة مريحة لمستخدمي موقعك. إن فهم كيفية التحكم في النماذج المنبثقة واستخدام العناصر التفاعلية تأثيرًا كبيرًا على فاعلية التصميم العام.