ساخت Dialog با استفاده از HTML5

پنجره های محاوره‌ای یکی از المان های مرسوم در طراحی رابط کاربری یک وبسایت است. از این المان برای هدف های مختلفی استفاده می شود، به عنوان مثال می توان به نمایش نوتیفیکیشن‌ها، نمایش فرم خبرنامه، نمایش یک هشدار یا خطا و یا جلب کردن توجه کاربر به یک بخش از اطلاعات اشاره کرد. وقتی که پنجره های محاوره‌ای به خوبی طراحی شوند و در راه درستی استفاده شوند باعث می شوند که وظایف کاربران بسیار ساده‌تر شود.

قبل ها برای ساختن پنجره‌ محاوره‌ای شما نیاز داشتید تا از کتابخانه های جی کوئری مانند Pop Easy و jQuery UI Dialog یا Twitter Bootstrap Modal استفاده کنید. اما با یادگیری المان جدید HTML5 به نام <dialog> ساختن پنجره‌های محاوره‌ای و مدل‌های پاپ آپ برای توسعه دهندگان بسیار ساده تر شده است. 

در ابتدای ساختن HTML از تگ <dialog> برای ساختن حالت محاوره‌ای استفاده می شد، اما این مورد در سال ۲۰۰۹ کنار رفت. با اینحال اکنون در یک قالب جدید دوباره عرضه شده است.

در این مطلب قصد دارم تا شما را با <dialog> آشنا سازم و نشان دهم که چگونه می‌توانید بیشترین استفاده را از این تگ ببرید. بیایید شروع کنیم!

پشتیبانی مرورگرها از المنت <dialog>

متاسفانه پشتیبانی برخی از مرورگرها از المان <dialog> تا حدی در حال حاضر محدود است. البته بعضی از مرورگرها به صورت خودکار ویژگی پشتیبانی از این المان را غیر فعال کرده اند اما شما می توانید آن را فعال کنید. برای این کار کافی ست وارد flags یا Experiments مربوط به مرورگر خود شوید و ویژگی «Enable experimental Web Platform features» را فعال نمایید.

بعد از انجام این کار کافی ست که از مرورگر خارج شوید و دوباره وارد آن شوید. 

رابط HTMLDialogElement

رابط HTMLDialogElement شامل یکسری مشخصات HTML مربوط به المنت <dialog> می شود. در این رابط ویژگی ها و مشخصات مختلفی وجود دارد که با آن می توانید به عنوان مثال پنجره محاوره‌ای‌تان را پنهان یا آشکار کنید. استفاده از آن ها مانند قسمت زیر است:

متدها :

رابط HTMLDialogElement سه متد کلی برای بستن و باز کردن پنجره های محاوره‌ای دارد:

• show(): این متد برای نمایش یک پنجره محاوره‌ای به کار برده می شود. اگر پنجره های محاوره‌ای نیز باز باشد کاربران هنوز می توانند به سندهای HTML دسترسی داشته باشند.
• showModal(): با استفاده از این متد دستور «modal dialog» را فعال می کنید، این حالت باعث می شود که یک پنجره محاوره‌ای باز شود. در این حالت کاربران تا زمانی که پنجره باز است نمی توانند به موارد دیگر دسترسی داشته باشند. 
• close(): از این متد برای بستن یک پنجره‌ محاوره‌ای استفاده می شود. شما می توانید در این دستور returnValue یک پارامتر اختیاری است که می‌توان از آن استفاده کرد و یا نکرد. 

خصوصیات :

رابط HTMLDialogElement  دو خصوصیت کلی را داراست که عبارت است از موارد زیر:

• returnValue: پارامتری را که در متد close() از آن چشم پوشی شده بود را برمی‌گرداند.
• open: این خصوصیت یک مقدار Boolean است. اگر مقدار آن true باشد کادر محاوره‌ای برای کاربران به نمایش در می آید و در غیر اینصورت پنهان می شود.

رویدادها :

وقتی که یک کادر محاوره‌ای بسته شود رویداد close به اجرا در می آید. 

dialog.addEventListener('close', function() {
    Other code will go here…
});

در کنار این خصوصیات و متدهای کلیدی، المان <dialog> از موارد دیگری نیز پشتیبانی می کند:

• form[method="dialog"]: از این دستور برای یکپارچه کردن یک فرم با <dialog> استفاده می شود. برای مثال با استفاده از این دستور می توانید یک فرم را درون پنجره محاوره‌ای نشان دهید.
• autofocus attribute: از این دستور برای قرار دادن یک کنترل تمرکز روی فرم ها در پنجره‌های محاوره‌ای استفاده می شود.
• cancel event: این رویداد زمانی به اجرا در می آید که شما روی کلید esc کلیک کنید.

حال که با کلیات و خصوصیات تگ <dialog> آشنا شدید، نیاز است که با همدیگر مثالی را درست کنیم.

ساختن یک پنجره محاوره‌ای

در ابتدای کار می خواهم به شما بگویم که چگونه می توانید به صورت ساده یک پنجره محاوره‌ای را ایجاد کنید. با استفاده از کد زیر و با استفاده از تگ <dialog> می توانیم یک محاوره ساده را همراه با مقداری از محتوا، یک دکمه باز کردن و یک دکمه بستن ایجاد نماییم. 

<dialog id="Dialog">
<h2>Welcome to Responsive Junction!</h2>
<p>Get Your Existing Site to Responsive</p>
<button id="closeDialog">Exit</button>
</dialog>
<button id="showDialog">Show Dialog</button>

وقتی شما کد بالا را تست می‌کنید جز یک دکمه با برچسب «Show Dialog» بدون کارایی چیز دیگری را نمی بینید. مطابق با تصویر زیر می‌توانید این وضعیت را بهتر مشاهده کنید:

برای باز و بسته کردن پنجره محاوره ای شما نیاز دارید تا از دستورات .show() و .close() در جاوا اسکریپت استفاده کنید. 

(function() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
  dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
  dialog.close();  
};
})();

حال اگر شما روی دکمه «Show Dialog» کلیک کنید مشاهده خواهید کرد که پنجره‌ محاوره ای باز می شود و همچنین با کلیک روی «Exit» پنجره نیز بسته می شود.

اضافه کردن استایل به پنجره محاوره‌ای

درست شبیه آن که به المان های دیگر کدهای‌ سی‌اس‌اس تان را اعمال می‌کنید در اینجا برای پنجره های محاوره‌ای نیز می توانید چنین کاری را انجام دهید. به صورت پیش فرض این پنجره های محاوره‌ای در مرکز صفحه و به صورت افقی اجرا می شوند. در نهایت با باز شدن این پنجره ها المان های دیگر صفحه نیز پنهان می شود. اگر شما با ظاهر پیشفرض و موقعیت گیری المان ها مشکلی ندارید، می توانید از نوشتن سی‌اس‌اس برای آن خودداری کنید. در غیر اینصورت آنطور که دوست دارید می توانید کدهای سی‌اس‌اس خود را قرار دهید. یک نمونه:

dialog {
top: 28%;
width: 400px;  
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
border-top: 5px solid #eb9816;
}
button{
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #eb9816;
border-bottom: 1px solid #f1b75c;
color: white;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.92;
cursor: pointer;
}

ساختن یک Modal Dialog

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

ساختن Modal Dialog کاری مشابه با ساختن پنجره های محاوره‌ای است، تنها تفاوت کلیدی این دو مورد این است که در Modal Dialog از .showModal() بجای .show() استفاده می شود. 

(function() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog. showModal(); 
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

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

اضافه کردن رنگ پشت زمینه به Modal Dialog ها

تگ <dialog> از یک پسوند به اسم "::backdrop" استفاده می کند که فقط با Modal Dialogs کار می کند. با استفاده از این المان می توانید به آن بخشی که کاربر در هنگام باز کردن پنجره به آن دسترسی ندارد، دسترسی داشته باشید. در این صورت می توانید کدهای سی‌اس‌اس آن را به سادگی تغییر دهید، برای مثال رنگ و موقعیت آن را تعیین نمایید.

dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}

پیاده سازی <dialog> همراه با یک فرم

یک فرم می‌تواند از طریق دستور form method="dialog" با المان <dialog> ادغام شود. با استفاده از خاصیت dialog.returnValue می توانید بعد از بستن پنجره محاوره ای داده های فرم را در اختیار داشته باشید. در زیر می توانید مثالی از این حالت را مشاهده کنید:

<dialog id="formDialog">
<form method="dialog">
<p>Do you agree with terms of use?</p>
<textarea>
Enter your text here!
</textarea>
<button id="submit" value="yes">Yes</button>
<button id="submit" value="no">No</button>
</form>
</dialog>
<button id="showformDialog">Open Form Dialog</button>

در نهایت از کدهای جاوا اسکریپت زیر نیز استفاده نمایید:

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(value);
};
document.getElementById('formDialog').addEventListener('close', function() {
alert(formDialog.returnValue);
});

نکته: برای درک بهتر موضوع بجای استفاده از Dialog از formDialog استفاده کردم.

در نهایت

در نهایت باید گفت که استفاده از المان <dialog> برای توسعه دهندگان و کدنویسان بسیار ساده تر و بهتر از استفاده از کتابخانه جی‌کوئری و کدهای سنگین دیگر است. با پیشرفت تکنولوژی و بروزرسانی نسخه های مرورگر، دیگر نیازی به نگرانی راجع به پشتیبانی از این المان نیستید. 

منبع