javascript/css popup div in php file

Question

I followed this guide for creating a popup div on my front page http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/

The thing is im not so familiar with coding and i want to put the code in my php file(wordpress site here). I don't know if i can make it work without the tag since my file isnt html so i tried to put pure javascript in it. The css code from the website is in the css style file of my wordpress site and of course the js file is in the folder as well! This is where i got stuck :

<script type="text/javascript" src="css-pop.js"></script>
<script type="text/javascript">
function popup() {
document.getElementById("popUpDiv").style.display = "block";
}
window.onload=function popup();
</script>

<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none"></div>

Can someone tell me the right code so i can get it working? Thanks!

I'm guessing you may also be using window.onload within your css-pop.js file. window.onload only supports one event of that type, and every time you use it, it will use the most recent occurrence of the event. In your case, if you have window.onload in css-pop.js, it will not work. I suggest using jquery $(document).ready(function(){//code here}); or take a look here on how to modify window.onload htmlgoodies.com/beyond/javascript/article.php/3724571/… — user3735633
– user3735633, Commented Jul 28, 2014 at 7:49

fiction · Accepted Answer · 2014-07-28 07:40:33Z

2

Try to replace

window.onload=function popup();

with

window.onload=popup; // or window.onload = function(){ popup(); };

You can read more at http://www.w3schools.com/js/js_htmldom_events.asp

answered Jul 28, 2014 at 7:40

fiction

5781 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arpit desai · Accepted Answer · 2014-07-28 07:49:24Z

0

function popup() {
    document.getElementById("popUpDiv").style.display = "block";
}
window.onload = function() {
    popup();
}

try this.it will work ..

answered Jul 28, 2014 at 7:49

arpit desai

797 bronze badges

Comments

2 revs · Accepted Answer · 2014-07-28 08:49:39Z

First of all, the best thing to do is to create a modal pop up, theorically, it's a hidden div that you show on an event. It will be a simple div that you can implement with whatever you want. I can imagine that you want a pop up centered in the document. To do that, create a div just after the body tag, and add to it a little bit of css, position absolute to center the pop up about the document and add properties top and left, z-index to show the pup-up over everything else on the page, the value must be the biggest z-index of the stylesheet. Then, the javascript code to show the pop-up on the onload event:

<html>
 <head>
   <title>Title of the document</title>
 </head>
<body>

<div id="popUp" style="display:none;z-index:10;position:absolute;top:50%;left:50%;">
 //Put the pop up content here
</div>

 //Your other elements

<script type="text/javascript">
window.onload = function (){showPopup();};
function showPopup()
{
    document.getElementById("popUp").style.display = "block";
}
</script>
</body>

Collectives™ on Stack Overflow

javascript/css popup div in php file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related