تگ dialog در html

از تگ dialog برای تعریف یک باکس یا مودال استفاده می‌شود. تگ <dialog> در HTML5 معرفی شده است و می‌تواند عناصری مانند متن، دکمه‌ها، لینک‌ها و فرم‌ها را درون خود قرار دهد. با استفاده از ویژگی open می‌توانید تعیین کنید که آیا پنجره باید به صورت پیشفرض باز یا بسته باشد.

نحوه استفاده از تگ <dialog>

↑

نمونه کد زیر نشان می‌دهد چگونه از تگ <dialog> برای تعریف یک باکس گفتگو در HTML استفاده کنید:

<!DOCTYPE html>
<html>
  <body>
    <p>This is some text.</p>
    <dialog open>This is an open dialog window</dialog>
    <p>This is some text.</p>
  </body>
</html>

همچنین برای کنترل بیشتر روی این تگ، می‌توانید از رویدادهای JavaScript مانند show, close, cancel و submit نیز استفاده کنید:

<button onclick="openDialog()">باز کردن پنجره</button>

<dialog id="myDialog">
  <h2>پیام</h2>
  <p>این یک پیام است.</p>
  <button onclick="closeDialog()">بستن</button>
</dialog>

<script>
  function openDialog() {
    var dialog = document.getElementById("myDialog");
    dialog.showModal();
  }

  function closeDialog() {
    var dialog = document.getElementById("myDialog");
    dialog.close();
  }
</script>

attribute یا ویژگی‌های قابل استفاده در تگ‌ <dialog>

↑

تگ دیالوگ می‌تواند دارای چندین ویژگی یا attribute باشد که استفاده از این ویژگی‌ها اختیاری است.

open

↑

ویژگی open در این تگ برای مشخص کردن اینکه آیا این تگ باید به صورت پیش‌فرض نمایش داده شود یا نه، استفاده می‌شود. در صورتی که این تگ دارای ویژگی open نباشد، این تگ به صورت پیش‌فرض نمایش داده نمی‌شود.

<button onclick="openDialog()">باز کردن پنجره</button>

<dialog id="myDialog">
  <h2>پیام</h2>
  <p>این یک پیام است.</p>
  <button onclick="closeDialog()">بستن</button>
</dialog>

<script>
  function openDialog() {
    var dialog = document.getElementById("myDialog");
    dialog.open = true;
  }

  function closeDialog() {
    var dialog = document.getElementById("myDialog");
    dialog.open = false;
  }
</script>

Global Attributes

↑

تگ <dialog> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

↑

تگ <dialog> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ dialog

↑

اکثر مرورگرها این تگ را با مقادیر پیش فرض زیر نمایش می دهند:

dialog{
  position: absolute;
  display: block;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
  width: -moz-fit-content;
  height: -moz-fit-content;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس

ثبت نامتعرفه آموزش خصوصی