How to display jquery popup only once on the landing page per user in laravel? Tweet

Showing a jquery popup only once to a user at one visit regardless of how many pages he goes through is easy but a bit tricky technique. You might even have noticed a huge number of designers and developers display them on homepage only. But the issue is, the popup would appear everytime a user goes back to the home page.

Whether you are using Laravel or some other framework, if you are working on any server side language, then, the best option would be to go with the session.

Check for a session key befre displaying the jquery popup and set the session key with some value once the poup is displayed. Then, everytime a new page loads, the session will have some value stored in that key. And hence, the popup message won't appear again until the user opens your website from a separate browser and restart his current browser.

Here's what i generally do in Laravel.

@if($popup)
  @if(!session()->has('modal'))
	<div class="modal fade" tabindex="-1" id="popup">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <a href="#" class="close" data-dismiss="modal">×</a>
	        <h4 class="text-uppercase">{{$popup->title}}</h4>
	      </div>
	      <div class="modal-body text-center">
	        <img src="{{$popup->image}}" alt="{{$popup->title}}" class="img-responsive">
	      </div>
	    </div>
	  </div>
	</div>
	<script>
	 $(window).load(function(){
        $('#popup').modal('show');
     });
 	</script>
 	{{ session()->put('modal','shown') }}
  @endif
@endif

Here, I've stored popup message in database. So, first of all, I've checked if there's is any data in $popup. Then, I've checked if there is any key named modal stored in session. If there is one the modal won't be displayed. Otherwise, the modal will be displayed and then a value will be stored in the session for the key modal.

Once the modal value is stored in session, the popup won't load again unless the session is expired.

Hope, this helps you out there.