آموزش تگ dialog در HTML
آموزش تگ dialog در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ dialog در HTML به صورت کامل آشنا بشید.
تگ dialog در HTML
تگ dialog تگی است که با استفاده از آن میتوان یک پنجره بازشونده یا به زبان ساده تر بخوام بگم یک پنجره پاپ آپ را ایجاد کنیم.
این تگ در حالت عادی شکل و شمایل خاصی ندارد ، اما ما با استفاده از CSS میتوانیم به آسانی به آن استایل بدهیم و هم اینطور با استفاده از زبان برنامه نویسی JavaScript میتوانیم به آن امکاناتی همچون ( باز و بسته شدن توسط کاربر ) را اضافه کنیم.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
مثال از تگ dialog در HTML
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده کنید.
مثال شماره یک : استفاده از تگ dialog در حالت عادی ( بدون استایل ) و با استفاده از صفت open بصورت از پیش تعیین شده دیالوگ نمایش میده.
<body> <dialog open> سایت آموزشی وردپرس پوش </dialog> </body>
در مثال شماره دو : استایل دادن به تگ dialog با استفاده از CSS و با استفاده از JavaScript با نوشتن این کد ها کاری کردیم که وقتی روی دکمه کلیک شد باکس دیالوگ رو نمایش بده و با کلیک به روی یک دکمه ی دیگه اون باکس بسته بشه.
<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>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ dialog در HTML پشتیبانی میکنند یا خیر.
- * ممکنه در مرورگر موزیلا فایرفاکس بصورت پیش فرض پشتیبانی نشود، چس باید در نوار آدرس این مرورگر وارد آدرس about:config بشید بعد dom.dialog_element.enabled رو جستجو کنید و اگه false بود باید به true تغییرش بدید.
جدول صفات تگ dialog در HTML
در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.
پشتیبانی از صفات و رویدادهای عمومی
تگ dialog قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- ممکنه این تگ در مرورگر موزیلا فایرفاکس بصورت پیش فرض پشتیبانی نشود، پس باید در نوار آدرس این مرورگر وارد آدرس about:config بشید بعد dom.dialog_element.enabled رو جستجو کنید و اگه false بود باید به true تغییرش بدید.
دستورات CSS پیش فرض
غالبا مرورگرها تگ dialog را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند شما هم می توانید از این دستورات استفاده کنید.
dialog{
border:3px solid black;
}
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید