جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش ساخت پیام ‍‍Snackbar Popup با جاوا اسکریپت

حتما تابحال اسم این نوع نمایش پاپ آپ را نشنیده باشید و این پست براتون گنگ و مبهم باشد …

Snackbaar PopUp , یک پیام به صورت تولتیپی میباشد که در پایین وب سایت به نمایش در می آید و میتوانید آن را پس از چند ثانیه محو کنید .

این نوع پیام ها بیشتر برای اطلاع از یک نوع خطای خاص یا اخطار و یا موفقیت آمیز بودن یک مرحله و نمایش آن به کاربران استفاده میشود . در ادامه با آموزش ساخت این نو PopUp با استفاده از Css3 و Java Script آشنا می شویم .

آموزش ساخت پیام ‍‍Snackbar Popup با جاوا اسکریپت

در ابتدا کد زیر را در HTML وب سایت خود قرار دهید . این کد متن نمایشی شما میباشد . پس میتوانید نوشته ی درون آن را تغییر دهید .

<div id="snackbar-vms">متن خود را وارد نمایید</div>

حال کد های زیر را در css وب سایت خود قرار دهید :

#snackbar-vms {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px; 
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px; 
}
#snackbar-vms.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

حال کد زیر را در Js وب سایت خود قرار دهید :

function SnackBar_vms() {
    var x = document.getElementById("snackbar-vms")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

و در آخر نوب به صدا زدن کد های بالا میرسه که شما میتوانید با خاصیت Onclick این کار را انجام بدهید . کافیست به تگ مورد نظر در Html خاصیت Onclick را بدهید و مقدار آن را ()SnackBar_vms قرار دهید .

مثلا در کد زیر این خاصیت به تگ button داده شده است . یعنی اگر روز این دکمه کلیک شد , Popup باز شود .

<button onclick="SnackBar_vms()">Show Snackbar</button>

دموی آماده SnackBar Popup

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

یک پاسخ به “آموزش ساخت پیام ‍‍Snackbar Popup با جاوا اسکریپت”

  1. سید گفت:

    سلام و سپاس

    http://www.xn--mgbguh09aqiwi.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%BE%DB%8C%D8%A7%D9%85-%E2%80%8D%E2%80%8Dsnackbar-popup-%D8%A8%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA.html#more-21763

    کپچای سایت برا نظر دادن ارور میده

    با سپاس

    اگر بخوایم بعد از لود شدن سایت نمایش بده بدون زدن باتن چکار کنیم استاد بزرگوار عزیز

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *