آموزش و يادگيري تگ dialog در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <dialog> آشنا مي‌شويم. اين تگ براي **ايجاد پنجره‌هاي محاوره‌اي (Dialog Box)** مانند پيام‌ها، اعلان‌ها يا فرم‌هاي ساده در صفحات وب استفاده مي‌شود.

تگ dialog در HTML چيست؟

تگ <dialog> براي نمايش يک پنجره محاوره‌اي (مودال يا غيرمودال) استفاده مي‌شود که مي‌تواند شامل هر نوع محتواي HTML مانند متن، دکمه، تصوير يا فرم باشد. اين تگ از HTML5 معرفي شده و با جاوااسکريپت کنترل مي‌شود.

مثال ساده از تگ dialog

<dialog id="myDialog">
  <p>اين يک پيام ساده است!</p>
  <button onclick="this.parentElement.close()">بستن</button>
</dialog>

<button onclick="document.getElementById("myDialog").showModal()">نمايش پيام</button>

در اين مثال، با کليک روي دکمه "نمايش پيام"، پنجره محاوره‌اي باز مي‌شود و کاربر مي‌تواند آن را ببندد.

ويژگي‌هاي مهم تگ dialog

ويژگي	توضيح
open	اگر تنظيم شود، پنجره هنگام بارگذاري صفحه باز است.
show()	نمايش پنجره به‌صورت غيرمودال (کاربر مي‌تواند با ساير عناصر تعامل کند).
showModal()	نمايش پنجره به‌صورت مودال (تمرکز فقط روي ديالوگ است).
close()	بستن پنجره با جاوااسکريپت يا دکمه داخلي.

استايل‌دهي به dialog با CSS

<style>
dialog {
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  font-family: sans-serif;
}
</style>

مي‌توانيد با CSS ظاهر ديالوگ را کاملاً شخصي‌سازي کنيد و آن را به‌صورت يک مودال زيبا نمايش دهيد.