Modal Popup Dialog

[ralfjuh]

Hi, I have made an modal popup dialog and it works perfect.Only problem is, it shows it for every pageload. Also when you just click a hyperlink or refresh. How to solve that it only gets shown ones?This is the code I use:

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

[ckrudelux]

The code you provided should only execute then called so it should work. The question is how does your code call this function look like?

[ShadowMage]

Yeah, we'll need some more context. Like ckrudelux stated, the code that actually calls those functions would be extremely helpful.

[ralfjuh]

Yeah, we'll need some more context. Like ckrudelux stated, the code that actually calls those functions would be extremely helpful.

That's all I used. maybe cause I embeded te script in a Joomla website.. see website link here: click here

[skaterdav85]

you need to trigger those functions somehow, either by calling them from an inline event handler or by attaching those functions to elements as a listener

[ShadowMage]

There are a lot of script elements on that page. Any one of them could contain the code that executes those functions. You should know where better than any of us. The point is, the code you posted will not do anything by itself. It must be called from somewhere else.

[ralfjuh]

You guys want me to post the full code?

[ShadowMage]

Depends on what you mean by "full code". We have access to all of your code through the link you gave us, but we don't know what you've created yourself and what each of those scripts actually does without digging through each and every one. At least I don't, maybe somebody else here has a better idea, but that's not my point.My point is, you should know what you wrote and where those functions are being called. That's the code we need to see.

[ralfjuh]

Well like I said the website is created in joomla. Only thing I did is added the code below at the bottom between the body tags:( Oh and I doubt it has anything to do with the fact that it's joomla cause even when I test the script in a empty document through dreamweaver it keeps coming back every refresh aswell.)

<div id="dnn_ctr557_ModuleContent" class="Laumen - Rad popupContent"> <style type="text/css">    .DisabledBackground {background-color:#111;opacity: 0.65;filter:alpha(opacity=65);position:fixed;z-index: 9001;top:0px;left:0px;width:100%;height: 100%;}.Popup {position: fixed;background-color:#2c61ad;top: 50%;left: 50%;margin-left: -400px;margin-top: -296px;width:800px;height:594px;z-index: 9002;border: solid 5px #333333;}.PopupContent{    position: relative;    width: 800px;    height: 594px;       padding: 0px 30px 30px 30px;} .PopupContent h2{    font-size: 30px;    font-weight: normal;} .Popup .CloseButton{    position: absolute;    right:10px;    top: 10px;   }       </style><script language="javascript">    function ShowPopup() {	    document.getElementById("PopupPanel").style.display = "block";    }    function HidePopup() {	    document.getElementById("PopupPanel").style.display = "none";    }</script> <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>

[justsomeguy]

That code doesn't contain anything to show the popup either. There's a call in the onclick handler on the input to hide the popup, but I don't see where it's getting shown in the first place. Is the problem that you're never hiding the popup in the first place? There's a popup div that is in the HTML, it sounds like you're not hiding it when the page loads. If I put a breakpoint on the show function it looks like it's never getting executed.

[ralfjuh]

That code doesn't contain anything to show the popup either. There's a call in the onclick handler on the input to hide the popup, but I don't see where it's getting shown in the first place. Is the problem that you're never hiding the popup in the first place? There's a popup div that is in the HTML, it sounds like you're not hiding it when the page loads. If I put a breakpoint on the show function it looks like it's never getting executed.

Yeah I guess so, I pretty much just took this script through the "View source" option from this website So I guess Im missing some part then?

[thescientist]

pretty much sounds/seems like you never bother to hide it in the first place. That explains why you always see it. Add this to your CSS

.PopupPanel{  display : none;}

[ralfjuh]

pretty much sounds/seems like you never bother to hide it in the first place. That explains why you always see it. Add this to your CSS

.PopupPanel{  display : none;}

Just did, but still does not work. It keeps coming back.I heard theres a way with cookies in javascript to make it only pop up ones in a session

[thescientist]

my bad. it's an ID, not a class.

#PopupPanel{  display : none;}

[ralfjuh]

my bad. it's an ID, not a class.

#PopupPanel{  display : none;}

Yes that works but now it doesnt show the pop up anymore at all.What I need is when I goto the page the pop up comes up.. the visitor clicks it away.. and it doesnt come back..Just like this websiteNow when you close the website (browser) all the way and go to the website again then it may appear again.

[justsomeguy]

The show script is setting the style on the element, so it's probably best to remove the display from CSS and put it on the div. <div id="PopupPanel" style="display: none;">

[ShadowMage]

Yes that works but now it doesnt show the pop up anymore at all.What I need is when I goto the page the pop up comes up.. the visitor clicks it away.. and it doesnt come back..Just like this website Now when you close the website (browser) all the way and go to the website again then it may appear again.

You need to actually call the show function. Add this to the end of your script (after the show/hide functions):

window.onload = ShowPopup;

This will add an event listener to the onload event and run the ShowPopup function when the page finishes loading. As for making it only appear once, you will probably need cookies. There's a good tutorial on W3Schools' website. Another option (though less supported, since it's new) is to use sessionStorage.

[ralfjuh]

You need to actually call the show function. Add this to the end of your script (after the show/hide functions):

window.onload = ShowPopup;

This will add an event listener to the onload event and run the ShowPopup function when the page finishes loading. As for making it only appear once, you will probably need cookies. There's a good tutorial on W3Schools' website. Another option (though less supported, since it's new) is to use sessionStorage.

Ok the popup appears but for making it appear ones I read the Cookie page on w3schools but I still don't know how to make it work in my code?

[ralfjuh]

Is there no way to find out how the website I provided does the trick to only show in ones. I don't see anything about cookie or sessionStorage in the code. Maybe something with PHP..?Oh and I just noticed that the website has this javascript file attached to it which contains alot of cookie information..

[ShadowMage]

I just noticed that the website has this javascript file attached to it which contains alot of cookie information..

Then it's a pretty safe bet that site is using cookies to show the popup only once. You can use the three functions in the W3Schools tutorial. Just copy and paste them into your code. 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.

[ralfjuh]

Then it's a pretty safe bet that site is using cookies to show the popup only once. You can use the three functions in the W3Schools tutorial. Just copy and paste them into your code. 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.

I'm trying haha, I wish I knew a little bit more about javascript lol

[ShadowMage]

I'm trying haha, I wish I knew a little bit more about javascript lol

When you get something put together, try it out, and if it doesn't work let us know. Post the new code you tried along with details about what doesn't work. Don't worry. It'll come with time.

[ralfjuh]

Ok so ive tried some things but still a nogo for me. This is my script 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;}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);    }  }}</script>

[ShadowMage]

Where's checkCookie? You need the checkCookie function too.

[ralfjuh]

My bad! It's there now..

    </style> <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 username=getCookie("username");  if (username!=null && username!="")  {  alert("Welcome again " + username);  }else  {  username=prompt("Please enter your name:","");  if (username!=null && username!="")    {    setCookie("username",username,365);    }  }}</script>