Back to Top


1395/07/19 - 14:00

نمایش popup تبلیغاتی در اولین load سایت

در خیلی سایت ها دیدیم که در اولین load صفحه یک popup نشون داده میشه و در بارهای بعد این Popup‌ نشون داده نمیشه. امروز میخوام طرز انجام این کار رو آموزش بدم.

کلمات کلیدی

JqueryTutorialPopupAds

نمایش popup تبلیغاتی در اولین load سایت

پاپ آپ اولین بازدید یک پلاگین سبک Jquery‌است که از cookie های مرورگر برای نمایش یک modal popup (مثل خوش آمد گویی) به کسانی که برای اولین بار از سایت بازدید می کنند استفاده می شود.

مراحل استفاده:

۱- افزودن کتابخانه های Jquery و firstVisitPopup به انتهای هر صفحه

لینک دانلود

<script src="jquery.min.js"></script>
<script src="jquery.firstVisitPopup.js"></script>

۲- قرار دادن پیام خوش آمد گویی داخل سایت

<div id="my-welcome-message">
  <h2>Welcome to my site</h2>
  <p>Hello, welcome to my website.</p>
</div>

۳- فعال سازی پلاگین

$('#my-welcome-message').firstVisitPopup({
  cookieName : 'homepage',
  showAgainSelector: '#show-message'
});

در اسکریت فوق نام کوکی نامی است که در مرورگر کاربر ثبت می شود و در بار بعد چک می شود که اگر موجود باشد دیگر به کاربر popup نشان داده نمی شود.
با تغییر آن می توانیم بازه های زمانی نمایش popup را تغییر دهیم مثلا با قطه کد زیر می توانیم کاری کنیم که popup در هر ۲۴ ساعت شبانه روز فقط یک بار به کاربر نمایش داده شود.

<script>
    $(function () {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        }

        if(mm<10) {
            mm='0'+mm
        }

        today = mm+'/'+dd+'/'+yyyy;

        $('#my-welcome-message').firstVisitPopup({
            cookieName: 'facebookpopup'+today,
            showAgainSelector: '#show-message'
        });
    });
</script>

۴- ایجاد فایل CSS به جهت شکل دهی به پیغام (این فایل از یک جنبه دیگر هم مهم است که در ابتدای کار پیغام را از صفحه مخفی می کند. (display:none)

#fvpp-blackout {
    display: none;
    z-index: 499;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
}

#my-welcome-message {
    display: none;
    z-index: 21000;
    position: fixed;
    width: 36%;
    left: 30%;
    top: 20%;
    padding: 20px 2%;
    font-family: Calibri, Arial, sans-serif;
    background: #FFF;
}

#fvpp-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

#fvpp-dialog h2 {
    font-size: 2em;
    margin: 0;
}

#fvpp-dialog p {
    margin: 0;
}