הצגת חלון פופאפ לפני יציאה מהאתר

חיפוש באתר
לשאלות ותשובות ברוכים הבאים לאתר wpHeb. אתר תמיכה ומדריכים למערכת וורדפרס. באתר תוכלו למצוא מדריכים וטיפים טובים לשימוש במערכת וורדפרס וכמובן הורדות לפלאגינים ותבניות. עם זאת, קיימת באתר מערכת שאלות ותשובות להתייעצויות ותמיכה במערכת.
פוסטים מומלצים
קישורים מומלצים
הצגת חלון פופאפ לפני יציאה מהאתר
23 אוגוסט, 2017

רוצים חלון פופאפ שיופיע לגולשים שלכם רגע לפני שהם סוגרים את החלון \ האתר? ובכן, תיארתי לעצמי שהדפדפנים עצמם לא היו מסכימים שפעולה רצינית תקרה כשמנסים לסגור חלון, במקרה הטוב אפשר לבצע שימוש ב-onbeforeunload כדי להציג חלון בסיסי של הדפדפן אבל זה לא משהו שאנחנו רוצים לעשות פה. אנחנו רוצים ליצור פופאפ יפה עם צבעים ותמונות, כיתוב ואולי אפילו טופס או קישור. אז בשביל זה אני פה.

ראשית, הוסיפו את הסקריפט הבא לפני הסגירה של ה-body

    <script type="text/javascript">
	        $(document).ready(function() {

                var exitonce = 1;
	
		        $(document).mousemove(function(e) {
                    if (exitonce != 0){
		
			            $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
			            $('#exitpopup').css('bottom', (window.innerHeight/2 - $('#exitpopup').height()/2));
		
			            if(e.pageY <= 15)
			            {
				
				            // Show the exit popup
				            $('#exitpopup_bg').fadeIn();
				            $('#exitpopup').fadeIn();
                            $( "#popupemail" ).focus();
                            exitonce = 0;
                            return false;
			            }
		            }
		        });
		
		        $('#exitpopup_bg').click(function(){
			        $('#exitpopup_bg').fadeOut();
			        $('#exitpopup').fadeOut();
		        });
	
	        });
        </script>

אתם תצטרכו לתת כמה ID לאלמנטים מסוימים.
exitpopup_bg = הרקע השחור שיופיע
exitpopup = הבלוק שיופיע באמצע
popupemail = שדה Input שיצרתי שבו יש שדה מייל. יהיה נחמד אם הוא יהיה כבר בפוקוס.

אבל, בגלל שאני נחמד, הכינותי מראש אלמנטים ואף עיצבתי לכם אותם לתפארת. אז הוסיפו את ה-HTML הזה, אפשר גם לפני הסגירה של ה-body.

<div class="dark" id="exitpopup_bg"></div>
<div id="exitpopup" class="popup">
          הודעה כלשהי <br/>
          <input id="popupemail" name="popupemail" type="email"/>
          <button class="small-button" type="submit">שלחו לי פרטים</button>
</div>

ולסיכום, ה-CSS החיוניים

.popup {
    position: fixed;
    background-color: white;
    padding: 20px;
    width: 30%;
    display: none;
    box-shadow: 0px 0px 5px black;
}

.dark {
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.75);
}