تگ dialog در HTML

204

نوشته شده توسط متین برونسی

منتشر شده در 21 می 2021

و آخرین بروزرسانی در 12 جولای 2021

دسته بندی ها:

HTML, فرانت اند

با استفاده از تگ dialog در HTML میتوانیم یک پنجره پاپ آپ ( بازشو ) یا مودال در سند ایجاد کنیم.

مثال

<dialog open>این یک پنجره پاپ آپ ( گفت و گو ) هست</dialog>

تعریف و کاربرد

تگ dialog در HTML یک کادر محاوره ای زیر پنجره را تعریف میکند.

معمولاً از عنصر <dialog> برای ایجاد پنجره های تبلیغاتی پاپ آپ استفاده می شود.

پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
`<dialog>`	37.0	79.0	53.0*	پشتیبانی نمی شود	24.0

خواص

خاصیت	مقدار	توضیحات
open	open	مشخص میکند که عنصر `<dialog>` فعال هست و آن را در مرورگر به کاربر نمایش می دهد

خواص عمومی

تگ dialog از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ dialog از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر dialog در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

dialog{
  border:3px solid black;
}

مثال های بیشتر

در این مثال با استفاده از خواص CSS و زبان Javascript یک دکمه ایجاد کرده ایم که با کلیک کاربر پنجره ما نمایش داده می شود:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
dialog {
background-color:aqua;
border:2px solid black;
font-family:b nazanin;
font-size:20pt;
padding:15px;
width:50%;
height:120px;
text-align:center;
}

.close-modal {
cursor:pointer;
background-color:red;
padding:5px;
color:white;
position: absolute;
bottom:10px;
left: 115px;
float:right;
border-radius:15px;
}
</style>
</head>
<body>

<p>این یک متن آزمایشی هست.</p>
<p>این یک متن آزمایشی هست.</p>
<p>این یک متن آزمایشی هست.</p>

<button onclick="showmodal()">روی من کلیک کن</button>
<dialog id="mymodal">
این یک پنجره پاپ آپ هست.
<span onclick="closemodal()" class="close-modal">بستن پنجره</span>
</dialog>

<p>این یک متن آزمایشی هست.</p>
<p>این یک متن آزمایشی هست.</p>
<p>این یک متن آزمایشی هست.</p>

<script>
function showmodal(){
document.getElementById('mymodal').style.display="block";
document.body.style.background="#808080";
}

function closemodal(){
document.getElementById('mymodal').style.display="none";
document.body.style.background="#fff";
}
</script>

</body>
</html>