در این مقاله قصد داریم به موضوع modal Popup بپردازیم و نشان دهیم چگونه می توانید بعد از یک وقفه زمانی کوتاه؛پنجره مودال را به نمایش بگذارید. همانطور که می دانید پنجره مودال (Modal window) در علوم رایانه به پنجره‌هایی در واسط کاربر گفته می‌شود که تا زمان بسته‌شدنشان اجازه انجام هیچ کاری در پنجره های دیگر را نمی دهند. این موضوع برای برجسته کردن یک Call to action خاص همچون ثبت نام و اشتراک در خبرنامه یا گرفتن لایک در فیس بوک بسیار موثر است. برخی از سایت ها از این تکنیک برای نمایش تبلیغات استفاده می کنند.قبل از ادامه کار، باید به این سوال پاسخ دهید که آیا واقعا Modal Popup برای سایت شما ضروری است یا خیر. به عنوان مثال فرض کنید وارد سایتی شده اید و در حال خواندن مقاله مد نظر خود هستید. در این حین یک پنجره مودال باز می شود بدون اینکه شما را به انجام کاری تشویق کند. در این شرایط چه احساسی خواهید داشت؟ قطعا پنجره مورد نظر را می بندید و سایت را ترک می کنید. به نظر من، چنین تکنیک هایی می تواند تجربه کلی کاربر را از بین ببرد. همیشه روش های بهتری برای آگاه کردن کاربر از محتوای منتشر شده و سایر موارد وجود دارد. با این وجود اگر باز هم قصد دارید از این تکنیک استفاده کنید در ادامه با وب ایده همراه باشید.
پیاده سازی و اجرای عمومی:
خوب اگر تصمیم گرفتید از این تکنیک استفاده کنید باید افزونه ای برای نمایش آن داشته باشید. شما می توانید از افزونه Colorbox برای نمایش مودال استفاده کنید. افزونه Colorbox از زبان جی کوئری استفاده می کند. بنابراین شما باید آن را به صفحه خود اضافه کنید. به قالب زیر توجه کنید:
<link rel=”stylesheet” href=”https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css” />
<script src=”https://code.jquery.com/jquery-2.2.4.min.js”></script>
<script src=”https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js”></script>
نمایش پنجره‌های مودال:
معمولا Colorbox به یک عنصر HTML ارجاع داده می شود :
$(selector).colorbox({
key:value,
key:value
});
با این وجود می توانیم colorbox را به صورت مستقیم بازخوانی کنیم ( بدون اینکه نیاز به ارجاع داشته باشیم). خوب دستور زیر را مد نظر داشته باشید.
$.colorbox({
key:value,
key:value
});
خوب باید بدانید که colorbox گزینه های مختلفی دارد( بیشتر این گزینه ها به نمایش تصویر مرتبط است). این گزینه ها به شما اجازه می دهد پنجره پاپ آپ خود را سفارشی سازی کنید. در مثالی که بیان می کنیم می توانید این موضوع را به خوبی مشاهده کنید. به عنوان مثال ابعاد آن را مشخص می کنیم و نامی به آن اختصاص خواهیم داد .
$.colorbox({
html:”
Call For a Free Quote
”,className: “cta”,
width: 350,
height: 150
});
خوب تنها کاری که باید انجام دهیم این است که از تابع setTimeout جاوا اسکرپیت برای فراخوانی این کد بعد از سپری شدن زمان خاص استفاده کنید. همانطور که می دانید setTimeout تابع محلی جاوااسکریپت است که تابعی را بعد از سپری شدن زمان خاص فراخوانی می کند یا کدی را اجرا می نماید. به دستور زیر نگاه کنید:
setTimeout(function(){
$.colorbox({
html:”
Call For a Free Quote
”,className: “cta”,
width: 350,
height: 150
});
}, ۱۰۰۰۰);
خوب حالا پنجره پاپ آپ بعد از سپری شدن ۱۰ ثانیه نمایش داده می شود.
نگرانی های مرتبط با دسترسی:
نگرانی هایی در مورد دسترسی افراد به این نوع پنجره ها وجود دارد. به عنوان مثال آیا کاربران می توانند با کیبورد خود با چنین پنجره هایی تعامل داشته باشند؟ ایا رها شدن از چنین پنجره هایی اسان است؟
اگرچه افزونه Colorbox برخی از این قابلیت ها را در اختیار شما قرا می دهد اما هنوز هم مواردی وجود دارد که باید بهبود یابد.
تغییر تمرکز:
زمانی که یک پنجره مودال باز می شود، Colorbox تمرکز خود را به خود پنجره می دهد. این موضوع خوب است اما اگر یک عنصر تعاملی در پنجره داشته باشیم می توانیم تمرکز را بر روی این عنصر قرار دهیم. این موضوع بدین معنی است که کاربران استفاده کننده از موس به کلیک کمتری نیاز خواهند داشت و افرادی که از کیبورد استفاده می کنند از دکمه های کمتری استفاده می کنند. اینکار را می توان از طریق روش focus جاوا اسکریپت انجام داد. همچنین باید از رویداد onComplete استفاده کنیم تا اطمینان حاصل کنیم محتوای موجود به خوبی بارگذاری می شود.
$.colorbox({
…
onComplete: function(){ $(“#myInput”).focus(); }
});
کاربران قبلا کجا بوده اند؟
بعد از اینکه کاربر از پنجره پاپ آپ خارج شد، باید برخورد مودبانه ای با آنها داشته باشید. در این شرایط باید کاربر به صفحه ای بازگردد که قبلا در آن بوده است. برای انجام اینکار باید عناصری که کاربر اخیرا با آن تعامل داشته است را پیگیری کنیم. به دستور زیر توجه کنید:
var lastFocus;
setTimeout(function(){
lastFocus = document.activeElement;
$.colorbox({
…
onClosed: function(){ lastFocus.focus(); }
});
}, ۲۰۰۰);
نمایش پنجره پاپ آپ در هر x ساعت:
به خاطر اینکه سایت شما قابلیت استفاده داشته باشد و تجربه خوبی برای کاربر فراهم کند بهتر است پنجره پاپ آپ هر زمانی که کاربر از سایت بازدید می کند نمایش داده نشود. در عوض شما می توانید هر X ساعت ( به جای X مقدار مورد نظر شما قرار می گیرد) یا هر X روز این کار را انجام دهید. یک روش برای انجام اینکار تنظیم کوکی بعد از نمایش پنجره مودال است که بعد از یک زمان خاص منقضی می شود. شما می توانید وجود کوکی در صفحه را بررسی کنید. برای انجام اینکار به مجموعه ای از توابع نیاز خواهیم داشت تا بتوانند کوکی ها را مدیریت کنند. بهتر است از js-cookie برای انجام اینکار استفاده کنید. این گزینه را در صفحه خود و بعد از کتابخانه Colobox قرار دهید.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js”></script>
خوب حالا می توان از قابلیت های مختلف استفاده کرد.
var lastFocus;
function onPopupOpen(){
$(“#myInput”).focus();
}
function onPopupClose(){
Cookies.set(‘colorboxShown', ‘yes', { expires: 1 });
lastFocus.focus();
}
function displayPopup(){
$.colorbox({
html:”
Call For a Free Quote
”,className: “cta”,
width: 350,
height: 250,
onComplete: onPopupOpen,
onClosed: onPopupClose
});
}
setTimeout(function(){
var popupShown = Cookies.get(‘colorboxShown');
if(popupShown){
console.log(“Cookie found. No action necessary”);
} else {
lastFocus = document.activeElement;
displayPopup();
}
}, ۲۰۰۰);
نتیجه گیری:
در این آموزش نحوه باز کردن پنجره پاپ آپ مودال(Modal popup) را با هم مرور کردیم.
