no-img
اِمیلاسلام کاربر مهمان. امروز سه شنبه ۲۱ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۲۷ مرداد ۱۳۹۸،
87 روز پیش
ساخت پیام پاپ آپ زیبا با جی کوئری
امتیاز 5.00 ( 3 رای )
حمایت از emila.ir

ساخت پیام پاپ آپ زیبا با جی کوئری

انتشار؛ ۲۷ مرداد ۱۳۹۸ - 87 روز پیش

شما هم دیده باشید که در برخی از وبسایت ها پیام هایی بعد از ورود یا ثبت نام یا خروج کاربر و … بصورت پاپ آپ نمایش داده می شود که همراه با افکت خاصی ظاهر و سپس خودبخود از صفحه خارج می شود. در این مطلب از emila با استفاده از HTML و JQuery ساخت این پاپ آپ زیبا را آموزش می دهیم.

کد HTML پیام پاپ آپ بصورت زیر است:

<div class="alert-container" style="display:none;">
<div class="alert-box" style="display:none;">
<span class="closebtn" onclick="nh_close_alert();">×</span>
<span class="alert-txt">متن مورد نظر برای نمایش به کاربر</span>
</div>
</div>

در کد بالا دیو .alert-container کل جعبه پیام را در بر می گیرد و باعث می شود که جعبه پیام در وسط صفحه نمایش داده شود. در ابتدا این دیو بصورت مخفی است.

در درون دیو .alert-container یک دیو دیگر با کلاس .alert-box وجود دارد که همان جعبه پیام نمایش داده شده هست.

این دیو متن پیام و دکمه بستن پیام را در برمی گیرد و رنگ زمینه آن بر اساس نوع پیام آبی، سبز، نارنجی، یا قرمز است.

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

در درون دیو .alert-box دو عدد span وجود دارد که یکی دکمه بستن را نمایش می دهد و دیگری متن پیام را.

span با کلاس .closebtn دارای خصوصیت .onclick() است که با کلیک بر روی آن تابع جاوا اسکریپت nh_close_alert() اجرا شده و پیام را می بندد. در ادامه این تابع را نیز توضیح خواهیم داد.

بعد از اینکه کد HTML را نوشتیم با استفاده از کد های CSS ظاهر پیام را شکل می دهیم. کد های CSS به شرح زیر است:

.alert-container{ width:100%; position:fixed; bottom:-20%; left:0%; text-align:center; z-index: 9;
}
.alert-box { display:inline-block; max-width:350px; padding: 20px; background-color: #2196F3; color: white; opacity: 1; transition: opacity 0.6s; margin-top: 45px;
}
.alert-box.success {background-color: #4CAF50;}
.alert-box.danger {background-color: #f44336;}
.alert-box.warning {background-color: #ff9800;}
.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 35px; cursor: pointer; transition: 0.3s;
}
.closebtn:hover { color: black;
}

بعد از کد HTML و CSS نوبت کد جی کوئری هست که باید نوشته بشه.

کد جی کوئری بصورت زیر هست که در ادامه توضیح میدم:

function nh_show_alert(msg='***',type='info'){	jQuery('.alert-box .alert-txt').text(msg);	jQuery('.alert-box').removeClass('success info warning danger');	jQuery('.alert-box').addClass(type);	jQuery('.alert-box').show();	jQuery('.alert-container').show();	jQuery('.alert-container').animate({bottom:'2%',left:'0%',opacity:1},"slow");	setTimeout(nh_close_alert,3000);
}

– در کد بالا تابعی به نام nh_show_alert() تعریف کردیم که برای نمایش پیغام همراه با افکت استفاده می شود.

تابع nh_show_alert() دو پارامتر دریافت می کند که اولی متن پیام مورد نظر هست و دومی نوع پیام که یکی از حالت های اطلاع، موفقیت، هشدار و خطر است که در اصل رنگ زمینه پیام نمایش داده شده را تعیین می کند که عبارتست از آبی برای اطلاعات، سبز برای موفقیت، نارنجی برای هشدار و قرمز برای خطر است.

– خط دوم در کد بالا مقدار پارامتر msg یعنی متن پیام را با استفاده از تابع .text() در درون دیو .alert-txt قرار می دهد.

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

– خط چهارم در کد بالا مقدار پارامتر type را به عنوان کلاس CSS با استفاده از تابع .addClass() به دیو .alert-box یعنی جعبه نمایش پیام اضافه می کند. این کلاس باعث می شود تا رنگ زمینه جعبه تغییر کند.

– خط پنجم و ششم دیو های انتخاب شده را با استفاده از تابع .show() در جی کوئری از حالت مخفی display:none; خارج می کنند.

با استفاده از تابع .animate() خصوصیت های CSS دلخواه را در یک بازه زمانی مشخص به عنصر HTML انتخاب شده اضافه می کنیم و یا اینکه خصوصیت های موجود آن عنصر را تغییر می دهیم.

– در خط ۶ از کد بالا خصوصیت فاصله از پایین صفحه bottom و فاصله از سمت چپ صفحه left و کدر بودن عنصر را تغییر دادیم و در پارامتر دوم از تابع animate اعلام کردیم که این تغییرات بصورت آهسته “slow” اعمال شود.

نکته : می توان بجای عبارت “slow” از مقادیر عددی استفاده نمود. به این صورت که زمان تغییرات را برحسب میلی ثانیه وارد کنم. بعنوان مثال برای اینکه تغییرات در طول ۳ ثانیه اعمال شود باید عدد ۳۰۰۰ را وارد نماییم.

– خط ۷ از کد بالا با استفاده از تابع setTimeout() جاوا اسکریپت بعد از گذشت ۳۰۰۰ میلی ثانیه (۳ ثانیه) تابع nh_close_alert() را برای بستن پیغام نمایش داده شده فراخوانی می کند.

در ادامه تابع nh_close_alert() توضیح داده خواهد شد.

function nh_close_alert(){	jQuery('.alert-container').animate({left:'60%',opacity:0},"slow");	jQuery('.alert-container').hide('slow');	jQuery('.alert-container').animate({bottom:'-20%',left:'0%'},"fast");
}

– در خط اول تابع nh_close_alert() دیو … توسط تابع .animate() به سمت راست حرکت داده می شود تا از صفحه خارج شود و opacity آن نیز 0 می شود تا نامرئی شود.

– در خط دوم نیز توسط تابع .hide(‘slow’) بصورت آهسته مخفی می شود.

– خط سوم از تابع بالا محل قرار گیری دیو … را به محل اولیه خود برمی گرداند تا در نمایش بعدی، جعبه پیام از پایین صفحه وارد شود.

در پایان کد نهایی به شکل زیر می باشد که می توانید آن را در انتهای قسمت body از صفحات ساییتان اضافه کنید و در موارد لازم با استفاده از تابع nh_show_alert() پیام دلخواهتون رو به کاربر نمایش دهید.

 

منبع؛ w3parsi.com


موضوع : وب/ برچسب : , , , / لینک کوتاه : https://emila.ir/?p=17423
designer