Jump to content

Modal Popup Dialog


ralfjuh

Recommended Posts

Like Ingolme said, your checkCookie function doesn't do anything with your ShowPoup function. You need to modify it like I explained in post #20:

You'll have to modify the code a little bit to utilize the ShowPopup function. Really the only thing you need to do is replace the line with the prompt with a call to the ShowPopup function and remove the if statement around the setCookie function. You'll then have to set the onload event handler to CheckCookie instead of ShowPopup.
Link to comment
Share on other sites

It isn't really all that hard. I outlined exactly what you need to do, though I did forget to mention that you might need to change the cookie name/value, but it should work without doing that since the function only checks whether it's null or empty.

function checkCookie(){var username=getCookie("username");  //Rename the cookie  if (username!=null && username!="")  {  alert("Welcome again " + username);  //You might want to comment this line out otherwise you'll get an alert every time after the first  }else  {  username=prompt("Please enter your name:","");  //Replace this line with a call to ShowPopup  if (username!=null && username!="") //Remove this if statement    {    setCookie("username",username,365);  //Rename the cookie    }  }}

You should end up with something like this:

function checkCookie(){var hasVisited=getCookie("visited");  if (hasVisited!=null && hasVisited!="")  {  //alert("Cookie exists!");  }else  {  ShowPopup();  setCookie("visited",1,365); //Here, I just set the value to 1; it could be anything  }}

You could rewrite that just slightly to make it shorter by modifying the outer if statement:

function checkCookie(){var hasVisited=getCookie("visited");  if (hasVisited==null && hasVisited=="")  {  ShowPopup();  setCookie("visited",1,365);  }}

Link to comment
Share on other sites

Wow you're good at this(A)Anyhow so I just took the last code you put up and made it like this:

<script language="javascript">     function ShowPopup() {	    document.getElementById("PopupPanel").style.display = "block";    }     function HidePopup() {	    document.getElementById("PopupPanel").style.display = "none";    }function setCookie(modalpopupcookie,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=modalpopupcookie + "=" + c_value;}window.onload = CheckCookie;function getCookie(modalpopupcookie){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);  x=x.replace(/^\s+|\s+$/g,"");  if (x==modalpopupcookie)    {    return unescape(y);    }  }}function checkCookie(){var hasVisited=getCookie("visited");  if (hasVisited==null && hasVisited=="")  {  ShowPopup();  setCookie("visited",1,365);  }}</script>

Still no effect though

Link to comment
Share on other sites

Are you getting any errors? You still have a case mismatch with this line:window.onload = CheckCookie; That uses a reference to set the onload handler to the CheckCookie function. Except you have it named checkCookie. (First 'c' is lowercase) The name you put here has to match exactly the name of your function, including case. You might also have to move that line to a point after you define the checkCookie function.

Link to comment
Share on other sites

No errors, it just keeps coming with every page load.This is what I have now:

<script language="javascript"> 	function ShowPopup() {		document.getElementById("PopupPanel").style.display = "block";	} 	function HidePopup() {		document.getElementById("PopupPanel").style.display = "none";	}function setCookie(modalpopupcookie,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=modalpopupcookie + "=" + c_value;} function getCookie(modalpopupcookie){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){   x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));   y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);   x=x.replace(/^\s+|\s+$/g,"");   if (x==modalpopupcookie)	{	return unescape(y);	}  }}function checkCookie(){var hasVisited=getCookie("visited");   if (hasVisited==null && hasVisited=="")   {   ShowPopup();   setCookie("visited",1,365);   }}window.onload = checkCookie;</script>

And this is how I started all the way from the start:

<script language="javascript"> function ShowPopup() {document.getElementById("PopupPanel").style.display = "block";} function HidePopup() {document.getElementById("PopupPanel").style.display = "none";} </script>

As you can see the window.onload = checkCookie; function was added afterwards as well

Link to comment
Share on other sites

OK, you're going to need to do some debugging. Check to see whether hasVisited has a value:

var hasVisited=getCookie("visited");console.log(hasVisited);

Then check in the Javascript console to see what value shows up.

Link to comment
Share on other sites

Well, I thought I found the error:This line:if (hasVisited==null && hasVisited=="") should be:if (hasVisited==null || hasVisited=="") Upon closer inspection, however, this error should actually prevent the popup from showing at all, not even on the first visit, because hasVisited cannot be null and an empty string at the same time. You should still make this change, though, and then follow Ingolme's advice to try to find the problem. EDIT: If you aren't sure what the JavaScript console is you can use alert instead of console.log (For now, that is. You'll want to familiarize yourself with the console of whatever browser your using [they all have one] if you plan on doing any amount of serious web development, though.)

Link to comment
Share on other sites

I did it using PHP. This code did the trick!

<?phpif(!isset($_SESSION['visitedPopup'])){?>   <div id="PopupPanel"><div id="dnn_ctr557_Popup_PopupPanel">    <div class="DisabledBackground"></div>    <div class="Popup">		    <input type="image" name="dnn$ctr557$Popup$CloseImageButton" id="dnn_ctr557_Popup_CloseImageButton" class="CloseButton" src="templates/laumen/images/sluit.gif" onclick="HidePopup(); return false;" style="border-width:0px;" />    <img id="dnn_ctr557_Popup_BackgroundImage" src="images/reclame.jpg" style="border-width:0px;" />	    </div></div></div>    <?php$_SESSION['visitedPopup'] = true;}?>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...