Other / Web Design

Create and Setup PopUp Box Using PHP and JS

Share this post
0

Recently i need to set up a popup box to my website which informed the visitors about the promotion. The conditions was to be that PopUp Box can open only on certain pages and to appear only once a day for each user. Searching the internet i found various solutions, but everyone demanded to type a lot of useless code or i can’t implement that code on my website at all.

After an couple hours unsuccessful search for an adequate solution, i had to think out myself how to create script which do the job as easily as possible. Since the site was php coded, it was not very difficult. Using php and jQuery manual i quickly find the necessary functions to make a useful and simple script.

First we need is to include jQuery Library ( copy code below)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

After that we add PHP script that will create cookie to define when PopUp Box will be run.

<?php $cookie_name = "popup"; $cookie_value = "drLaf0 - Promotion"; //setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day if( !( isset($_COOKIE[$cookie_name]) && $_COOKIE[$cookie_name] != "popup" ) ){ setcookie($cookie_name,$cookie_value,time() + 86400); ?>

Since we define cookie parameters such as name, description and duration, we create an IF statement to check whether $cookie_name is already defined, ie, whether there is a name and is name equals like name defined in the $cookie_name ( in this case, “popup” ).

The next step is to fill in the header of if statement: “If the cookie is not created, create it and run the PopUp Box.”

<script language="javascript" type="text/javascript">	
	function PopUp(hideOrshow) {
	if (location.href == "http://example.com/" || location.href == "http://example.com/about-us" ) {  
		if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
		else document.getElementById('ac-wrapper').removeAttribute('style');
	}	}
	window.onload = function () {
		setTimeout(function () {
			PopUp('show');
		}, 2000);
	}
</script>

On that part of code we see above we define on which url links we will display PopUp Box and how long he will be visible. If your website have PopUp Box on every url then you can define where to display PopUp Box if not then PopUp Box will be display only on url where you add PopUp Box.

After that, we need to close php if statement like in the code below.

<?php } ?>

With this step we end coding for PopUp Box, now we only need to define style for PopUp Box. You can create any style for PopUp Box or get some free PopUp design, only one thing is important, to add your popup inside of #ac-wrapper id in the popup class or you can adapt jQuery script for your PopUp Box style. See code below.



<div id="ac-wrapper" style="display:none;">
   

<div class="popup">
      Your code put here!!
   </div>


</div>

After that step you can check whether everything works fine and whether your PopUp Box display on right place. Also we need to add some css style like in code below which you can modify if you wish.

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(49, 49, 49, 0.6);
    z-index: 1001;
}
#popup {
    width: 555px;
    height: 375px;
    background: #fff;
    background-size: cover;
	border:2px solid #2b0d0d;   
    box-shadow: #414346 0px 0px 30px 1px;
    -moz-box-shadow: #414346 0px 0px 30px 1px;
    -webkit-box-shadow: #414346 0px 0px 30px 1px;
    position: relative;
    top: 25%;
    margin:0 auto;
}

That is it, if you have something to say, please write in comment and i will answer on as soon as possible.

Related Stories