HTML Tutorial

عنصر <dialog>

استخدام عنصر <dialog>:

يُستخدم عنصر <dialog> لإنشاء نافذة حوار نموذجية تحتوي على عنوان وزر لإغلاقها. يمكن فتح نافذة الحوار من خلال عنصر <button> أو رابط.

خصائص <dialog>:

  • open: تُحدد ما إذا كانت نافذة الحوار مفتوحة أم مغلقة.
  • novalidate: تُستخدم لتجاوز التحقق من صحة النموذج عند إغلاق نافذة الحوار.

أمثلة على استخدام <dialog>:

<button onclick="myDialog.show()">Open Dialog</button>

<dialog id="myDialog">
  <h2>My Dialog</h2>
  <p>This is a simple dialog.</p>
  <button onclick="myDialog.close()">Close</button>
</dialog>

مثال HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the <dialog> Tag</title>
</head>
<body>
  <button onclick="myDialog.showModal()">Open Dialog</button>

  <dialog id="myDialog">
    <h2>My Dialog</h2>
    <p>This is a simple dialog.</p>
    <button onclick="myDialog.close()">Close</button>
  </dialog>

  <script>
    const myDialog = document.getElementById('myDialog');
  </script>
</body>
</html>