این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ dialog در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ dialog در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ dialog در HTML
تگ dialog تگی است که با استفاده از آن میتوان یک پنجره بازشو یا خودمونی تر بخوام بگم یک پنجره پاپ آپ را ایجاد نماییم.
این تگ در حالت عادی شکل و شمایل خاصی نداره ، ولی خب ما با استفاده از CSS میتونیم به راحتی به آن استایل بدهیم و با استفاده از JavaScript میتونیم به آن امکاناتی همچون ( باز و بسته شدن توسط کاربر ) را بدهیم.
Free-Learn
مثال از تگ dialog در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ dialog در حالت عادی ( بدون استایل ) و با استفاده از صفت open بصورت پیش فرض دیالوگ نمایش داده میشه.
|
1 2 3 4 5 6 7 |
<body> <dialog open> سایت آموزشی فری لرن </dialog> </body> |
مثال شماره ۲ : استایل دادن به تگ dialog با استفاده از CSS و با استفاده از JavaScript کاری کردیم که وقتی روی دکمه کلیک شد باکس دیالوگ نمایش داده بشه و با کلیک بروی یک دکمه بسته بشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style> dialog{ background-color: #F9F9F9; color: #1c1a1a; border: 2px solid black; font-family: tahoma; font-size: 14px; padding: 15px; border-radius: 5px; width: 400px; height: 80px; text-align: center; } .clsmd{ cursor: pointer; background-color: #d2d22c; padding: 5px; color: black; bottom: 0; position: absolute; border-radius: 5px; left: 0; right: 0; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ dialog در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ dialog در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| open | open | دیالوگ را بصورت پیش فرض در مرورگر نمایش میدهد |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ dialog از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ dialog را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
dialog{ border:3px solid black; } |
