تگ dialog در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ dialog در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

فهرست مطالب

تا حالا شده وارد سایتی شوید و پنجره ای وسط صفحه باز شود؟ گاهی صاحبان وبسایت ها برای نمایش پیام خود به کاربران از جعبه هایی مربع یا مستطیل شکل در وسط صفحه جهت این کار استفاده می کنند. تگ dialog در HTML امکان نمایش پنجره های باز شو در صفحه را فراهم می کند.

تگ dialog چیست؟

تگ dialog برای نمایش پنجره های بازشو در صفحه استفاده می شود.

این تگ با <dialog> شروع شده و با </dialog> پایان می یابد.

<dialog>Text</dialog>

صفت open

این صفت برای نمایش دادن جعبه یا پنجره بازشو استفاده می شود. در صورت استفاده از این صفت پنجره نمایش داده می شود و در غیر این صورت پنجره نمایش داده نمی شود.

<dialog open>Text</dialog>

مثال تگ dialog

فرض کنید دکمه ای با عنوان کلیک درون صفحه قرار دارد که با کلیک بر روی آن می خواهیم پنجره دیالوگ باز شده و محتویات آن نمایش داده شود. برای این کار از جاوا اسکریپت کمک می گیریم.

برای شروع با استفاده از button یک دکمه می سازیم و با رویداد onclick تابعی به نام DialogFunc را فراخوانی می کنیم.

کد HTML:

<button onclick="DialogFunc()">کلیک</button>

در ادامه کدهای مربوط به دیالوگ و محتویات درون آن را می نویسیم.

کد HTML:

<dialog id="txt">پیام</dialog>

در مرحله آخر با استفاده از جاوا اسکریپت عناصر درون صفحه را پویا می کنیم.

در این مرحله ابتدا دیالوگ مورد نظر را توسط صفت id شناسایی کرده و تابعی به نام DialogFunc ایجاد می کنیم. در ادامه بررسی می کنیم اگر تابع DialogFunc توسط دکمه کلیک فراخوانی شد و دیالوگ باز بود فورا بسته شود و در غیر این صورت اگر دیالوگ بسته بود فورا باز شود.

کد JavaScript:

const dialog = document.getElementById("txt");

function DialogFunc() {
  if (dialog.open) {
    dialog.open = false;
  } else {
    dialog.open = true;
  }
}

اجرا

سازگاری با مرورگرها

تگ dialog با مرورگرهای زیر سازگار است:

  • گوگل کروم نسخه 37 و بالاتر
  • فایرفاکس نسخه 98 و بالاتر
  • اج نسخه 79 و بالاتر
  • اپرا نسخه 24 و بالاتر
  • سافاری نسخه 15.4 و بالاتر
  • گوگل کروم اندروید نسخه 37 و بالاتر
  • فایرفاکس اندروید نسخه 98 و بالاتر
  • اپرا اندروید نسخه 24 و بالاتر
  • سافاری iOS نسخه 15.4 و بالاتر

معرفی مطالب در این زمینه