النافذة المنبثقة ومربّع الحوار

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

<div id="my-popover" popover>My popover content</div>

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

التحكّم في النوافذ المنبثقة

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

بشكل تعريفي

يمكن التحكّم في النوافذ المنبثقة بالكامل في HTML، بدون الحاجة إلى استخدام JavaScript، وذلك باستخدام الأزرار (والمدخلات التي تحمل النوع button) والسمة popovertarget.

يحتوي العنصر المنبثق في مقتطف الرمز السابق على id بقيمة my-popover، ويمكنك استخدام هذا العنصر للإشارة إلى العنصر المنبثق.

<button popovertarget="my-popover">Toggle</button>

يمكنك أيضًا تحديد ما إذا كان الزر سيفتح أو يغلق نافذة منبثقة باستخدام popovertargetaction="show" وpopovertargetaction="hide".

باستخدام JavaScript

يمكنك أيضًا التحكّم في النافذة المنبثقة باستخدام JavaScript، وهو أمر مفيد عندما تريد عرض نافذة منبثقة استجابةً لحدث آخر غير نقرة المستخدم على زر. لتنفيذ ذلك، عليك الحصول على عنصر النافذة المنبثقة، ثم استدعاء showPopover() أو hidePopover() أو togglePopover().

أنواع النوافذ المنبثقة

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

النوافذ المنبثقة التلقائية

تتضمّن النوافذ المنبثقة التلقائية معظم الوظائف المضمّنة، وهي الإعداد التلقائي في حال عدم تحديد نوع.

<div id="popover" popover>My popover</div>

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

النوافذ المنبثقة اليدوية

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

<div id="popover" popover="manual">My popover</div>

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

النوافذ المنبثقة الخاصة بالتلميحات

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

<div id="popover" popover="hint">My popover</div>

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

تحديد موضع النافذة المنبثقة

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

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

هناك خطوتان لتحديد موضع عنصر الارتساء، وهما تحديد عنصر الارتساء ووضع العنصر بالنسبة إلى عنصر الارتساء. يمكن أن تتعامل النوافذ المنبثقة مع الخطوة الأولى من خلال ضبط عنصر ربط ضمني لك. عند فتح نافذة منبثقة باستخدام <button popovertarget>، يكون الزر هو العنصر الأساسي الضمني. إذا كنت تفتح نافذة منبثقة باستخدام JavaScript، يمكنك ضبط العنصر الأساسي الضمني باستخدام الخيار source.

يتم توسيط النافذة المنبثقة تلقائيًا باستخدام margin: auto. لاستخدام تحديد موضع العنصر الثابت، من المحتمل أن تحتاج إلى إلغاء ذلك من خلال ضبط margin: unset.

الأنماط والصور المتحركة

العنصر الزائف ::backdrop

تفتح النوافذ المنبثقة في طبقة علوية، فوق كل المحتوى الآخر على صفحتك. أسفل النافذة المنبثقة، يوجد عنصر زائف ::backdrop يمكن تنسيقه.

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

الفئة الصورية ‎ :popover-open

لنفترض أنّك تريد تخطيط محتوى النافذة المنبثقة باستخدام شبكات CSS. تضيف [popover]{ display: grid }، وفجأة تصبح كل النوافذ المنبثقة مرئية. ويرجع ذلك إلى أنّه يتم إخفاء النوافذ المنبثقة باستخدام display: none. يمكنك استخدام الفئة الزائفة :popover-open لتطبيق الأنماط فقط عندما يكون العنصر المنبثق مفتوحًا.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

تكون السمة :popover-open مفيدة أيضًا عند تحريك نافذة منبثقة.

تحريك النوافذ المنبثقة

تتضمّن الصورة المتحركة المنبثقة 3 خطوات:

1. @starting-style {popover:popover-open { } }-الأنماط الأولية للعنصر المنبثق بمجرد ظهوره. يُرجى العِلم أنّه يجب تحديد ذلك في ورقة الأنماط بعد الخطوة رقم 2.
2. popover:popover-open { }: أنماط النافذة المنبثقة عند فتحها
3. popover { }- الأنماط التي تنتقل إليها النافذة المنبثقة عند إغلاقها.

يتم إخفاء النافذة المنبثقة باستخدام display: none عندما لا تكون مفتوحة. لتحريك هذا العنصر، عليك ضبط transition-behavior: allow-discrete، وإضافة display إلى قائمة السمات في transition.

إذا كنت تحدّد موضع النافذة المنبثقة باستخدام عنصر ربط ضمني، عليك أيضًا إضافة overlay إلى قائمة السمات في transition. تتم إزالة علاقة العنصر الثابت الضمنية بمجرد إزالة النافذة المنبثقة من الطبقة العلوية، لذا تؤدي إضافة انتقال إلى السمة overlay إلى تأخير ذلك إلى حين اكتمال انتقال الخروج.

التفاعلات بين النوافذ المنبثقة

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

النوافذ المنبثقة المتداخلة

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

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

تتم إضافة عنصر منبثق إلى الحزمة إذا كان العنصر المصدر داخل عنصر منبثق. يتم ضبط عنصر المصدر تلقائيًا عند استخدام popovertarget على زر، أو باستخدام JavaScript من خلال ضبط الخيار source عند استدعاء .showPopover({source}) أو .togglePopover({source}).

هناك حزمة من النوافذ المنبثقة التلقائية، وحزمة منفصلة من النوافذ المنبثقة التي تقدّم تلميحات. ومع ذلك، إذا فتحت نافذة منبثقة خاصة بالتلميحات من داخل نافذة منبثقة تلقائية، ستتم إضافتها إلى الحزمة التلقائية.

تذكَّر أنّ النوافذ المنبثقة الخاصة بالتلميحات مخصّصة لعرض معلومات بسيطة ومؤقتة، لذا لا يمكنك تشغيل نافذة منبثقة تلقائية من نافذة منبثقة خاصة بالتلميحات.

إذا كنت تستخدم النوافذ المنبثقة اليدوية، عليك إدارة كل ذلك يدويًا.

إغلاق أنواع أخرى من النوافذ المنبثقة

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

تكون تلميحات الأدوات مؤقتة، وتظهر عند تمرير مؤشر الماوس فوق النص. نتوقّع ظهور تلميح واحد فقط في كل مرة، وسيؤدي ظهور تلميح ثانٍ إلى إغلاق التلميح الأول.

عند فتح القائمة من خلال النقر على زر، يتم إغلاق التلميح لسببَين. أولاً، تؤدي النقرة خارج التلميح إلى إغلاقه. ثانيًا، يؤدي فتح نافذة منبثقة تلقائية إلى إغلاق جميع النوافذ المنبثقة المفتوحة الخاصة بالتلميحات. يرجع ذلك إلى أنّ المستخدم قد غيّر ما يركّز عليه، ولم يعُد المحتوى المؤقت في النافذة المنبثقة للتلميح مناسبًا. هذا يعني أنّه إذا اتصلت بـ showPopover() في نافذة منبثقة تلقائية، سيتم إغلاق أي نافذة منبثقة مفتوحة خاصة بالتلميحات.

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

ومع ذلك، أثناء فتح قائمة منسدلة، قد تحتاج إلى عرض محتوى تلميح غير ذي صلة. لا يؤدي عرض تلميح إلى إغلاق النوافذ المنبثقة التلقائية.

لا تتأثر النافذة المنبثقة اليدوية بالنوافذ المنبثقة التلقائية أو تلك التي تظهر عند التلميح، وعندما تفتح، لا تغلق أي نوافذ منبثقة تلقائية أو تلك التي تظهر عند التلميح. ومع ذلك، إذا فتحت نافذة منبثقة يدوية من خلال النقر على زر، سيؤدي ذلك إلى إغلاق النوافذ المنبثقة التلقائية ونوافذ التلميحات.

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

التحقّق من فهمك