استخدم عناصر حوار HTML5 الأصلية وقم بإنشاء مكونات مشروطة بسهولة

تضيف مسودة HTML 5.2 عنصر حوار جديدًا. لكنها تقنية تجريبية.

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

فيما يلي بنية html لمربع مشروط bootstrap:

 <!-- الزر يؤدي إلى تشغيل مربع مشروط--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> ابدأ في عرض مربع مشروط</button><!-- صندوق مشروط (مشروط) ) -><div class=modal Fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=Close data-dismiss=modal aria-hidden=true> &times; </button> <h4 class =modal-title id=myModalLabel> عنوان مشروط</h4> </div> <div class=modal-body> أضف بعض النص هنا</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>إغلاق</button> <button type=button class=btn btn-primary> إرسال التغييرات</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

فيما يلي بنية HTML لمربع مشروط أصلي:

 <!-- الزر يؤدي إلى تشغيل مربع مشروط--><button type=button class=btn>إظهار مربع مشروط</button><!-- مربع مشروط--><dialog open> مربع مشروط أصلي بتنسيق HTML5</ حوار>

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

توضح الصورة أعلاه نمط مربع مشروط أساسي.

افتح المتصفح ويمكنك أن ترى أن أسلوبه الأساسي كالتالي:

 الحوار { العرض: موضع الكتلة: اليسار المطلق: 0px؛ العرض: -webkit-content؛ نمط الحدود: لون الحدود: أولي، الحشوة الأولية: 1em؛}

يقدم عنصر الحوار أيضًا محددًا جديدًا للفئة الزائفة::backdrop، ويكون نمط الخلفية الافتراضي الذي يتم عرضه من خلال المتصفح كما يلي:

 الحوار::خلفية { الموضع: ثابت؛ أعلى: 0px؛ أسفل: 0px؛ الخلفية: rgba(0, 0, 0.1);}

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

على سبيل المثال:

 مربع الحوار {الهامش العلوي: 200 بكسل؛ العرض: 250 بكسل؛ الارتفاع: 0 0 15 بكسل؛ :خلفية { الخلفية: rgba (أسود، .5)؛}

تأثير النمط أعلاه هو كما يلي:

يوجد أدناه مربع حوار أساسي لا يعرض أي شيء بشكل مرئي لأنه لم يتم تعيين السمة المفتوحة. تحتاج إلى استخدام JavaScript API لإظهاره/إخفائه:

 <dialog>هذا مربع حوار! </الحوار>

يجب أن تقوم واجهات برمجة التطبيقات .show() و . Close() لعنصر الحوار بعرض وإغلاق مربع الحوار على التوالي. باستخدام هاتين الواجهتين API في عنصر DOM، يمكنك عرض مربع الحوار وإغلاقه.

على سبيل المثال:

 <!-- HTML --><dialog> <p>هذا مربع حوار! </p> <button id= Close>إغلاق مربع الحوار</button></dialog><button id=show>إظهار مربع الحوار</button> <!-- script --> <script> var Dialogue = document.getElementById(""); querySelector(dialog); document.querySelector(#show).onclick = function(){حوار.show() }; };</script>

يمكنك تمرير معلمة إلى الحوار.إغلاق (). من خلال الاستماع إلى حدث الإغلاق لعنصر الحوار، ستُرجع الخاصية الحوار.returnValue القيمة المحددة.

يحب:

 <!--HTML--><dialog> <p>هذا مربع حوار! </p> <p><input type=text id=return_value value= placeholder=يرجى إدخال المحتوى/></p> <button id= Close>إغلاق مربع الحوار</button></dialog><button id=show >إظهار مربع الحوار</button><!--script--><script> var حوار = document.querySelector(dialog); document.querySelector(#show).onclick = function(){; حوار.showModal(); }; document.querySelector(# Close).onclick = function(){ var val = document.querySelector(#return_value).value; حدث إغلاق العنصر الحوار.addEventListener(إغلاق, function(){ تنبيه(this.returnValue); });</script>

واجهة برمجة تطبيقات أخرى لعرض مربعات الحوار هي .showModal()

إذا كنت لا تريد أن يتفاعل المستخدم مع كائنات عناصر الصفحة بخلاف مربع الحوار، فاستخدم .showModal() لفتح مربع الحوار بدلاً من استخدام .show(). سيحتوي مربع الحوار المفتوح باستخدام .showModal() على طبقة خلفية شفافة كاملة النافذة، مما يمنع المستخدم من التفاعل مع كائنات عناصر الصفحة خارج مربع الحوار. وفي الوقت نفسه، سيتم عرض مربع الحوار في منتصف النافذة افتراضيًا (الجزء العلوي الأوسط، والأسفل، واليسار، واليمين))؛ وسيتم عرض مربع الحوار المفتوح باستخدام .show() في الجزء العلوي من النافذة افتراضيًا (يمكن تحقيق العرض المركزي من خلال CSS).

بعد إغلاق مربع الحوار، يؤدي الإغلاق إلى تشغيل حدث. بالإضافة إلى ذلك، يمكن للمستخدم إغلاق مربع الحوار المشروط عن طريق إدخال مفتاح Escape. سيؤدي هذا إلى إطلاق حدث الإلغاء الذي يمكنك إلغاءه باستخدام events.preventDefault().

يمكنك استخدام النموذج[method=dialog] لدمج نموذج مع عنصر <dialog>. بعد إرسال النموذج، يتم إغلاق مربع الحوار وتعيين قيمة الحوار.returnValue إلى قيمة زر الإرسال الذي تم استخدامه.

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

على سبيل المثال:

 <!--HTML--><dialog id =dialog> <form Method =dialog> <p>هل توافق على شروط الاستخدام؟ </p> <p><textarea class =form-control Disable>الشروط والمتطلبات...</textarea></p> <button type =submit value =Yes>Yes</button> <button type =submit value = لا يوجد تركيز تلقائي>لا</button> </form></dialog><button id=show>إظهار مربع حوار النموذج</button><!--script--><script> var حوار = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){حوار.showModal(); }; // استمع إلى حدث الإغلاق لعنصر الحوار حوار.addEventListener(إغلاق, function(e){ if(this.returnValue = == نعم ){ تنبيه(this.returnValue) //dosomething... }else{ تنبيه(this.returnValue) //dosomething... });</script>

من بين متصفحات سطح المكتب، يدعم Google Chrome فقط الوظيفة الكاملة لمربع الحوار (اعتبارًا من وقت نشر هذه المدونة). لتحقيق التوافق عبر المتصفحات، يرجى استخدام مربع الحوار polyfill.

<iframe src=//caniuse.com/dialog/embed التمرير=noallowtransparency=trueallowfullscreen=trueframeborder=0></iframe>

مقالة مرجعية: عرض عنصر الحوار

مكتبة الوظائف عادةً js: https://github.com/JofunLiang/usuallyjs

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.