no-img

اِمیلاساخت پیام پاپ آپ زیبا با جی کوئری - اِمیلا
0
شنبه 30 شهریور 1398ورودعضویت
اِمیلا
ترفند وب ساخت پیام پاپ آپ زیبا با جی کوئری
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما پیشاپیش سپاسگذاریم

ادامه مطلب

انتشار؛ 27 مرداد 1398،
34 روز پیش
ساخت پیام پاپ آپ زیبا با جی کوئری
امتیاز 5.00 ( 2 رای )
حمایت از emila.ir

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

منتشر شده در شنبه 30 شهریور 1398 - 34 روز پیش
101
milipinkman
سوال دارم

شما هم دیده باشید که در برخی از وبسایت ها پیام هایی بعد از ورود یا ثبت نام یا خروج کاربر و … بصورت پاپ آپ نمایش داده می شود که همراه با افکت خاصی ظاهر و سپس خودبخود از صفحه خارج می شود. در این مطلب از 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
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

پاسخی بگذارید

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

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک  -  ارسال ایمیل
IP شما : 35.172.100.232