Holy crap! What a title…ok, so you need to know how to make a div, style it with css, then make that div a link using javascript, then also make that link open a popup window a specific size. Whew! What a mouth full.
Add one PHP document, pepper in CSS, slowly stir in Javascript and bring to a POP UP!
Recently Rick and I ran into a situation where we wanted to set up a div with a background image then lay some PHP on the div to make the banner have a little call to action and put off a sense of urgency (aka we were running a sale and wanted a cool banner with the date on it). The problem was, the only way we knew how to do that was with Javascript and in doing so, we made it difficult for ourselfs to also make that div a pop up. I know it sounds confusing, but it really wasn’t all that bad. I will take you step by step on how to create a link from a div then have that link open a new window. Also, I will show you why you might want something like that. Note: You can also do something like this using lightbox if you want to go out and make it really pretty, but for the sake of a DYI tutorial, I will show you how to do it without lightbox.
So to start off, here is what we want and why we want it:
- We want a div with a background image
- We want to put text on top of that div, specifically for this tutorial, we want to put php and echo the date.
- We want the div itself to be a link
- We want the link to open in a new window at a size we specify
Got it? Good! OK. First things first, we will start from scratch. Open a new document in your text editor- I personally use Dreamweaver because I like some of the functions they have and I am just use to it (although it blows for writing PHP- I use notepad++ for that). After you open a new doc, create a very basic page like this (sorry I made it an image, but I am having problems pasting code into my posts right now- you can download the full source at the bottom of the page):
Next thing you want to do is add some basic CSS and get step one finished. So for that we will add some basic styles to both divs and we will also add our text, which happens to be a little snippet of php that will echo the date. For more on PHP’s date function, please see the PHP Manual As you can see, we are starting to get there. We now have our div, background image and the text where we want it, like so:
Now, we want to add the javascript. A good way to remember these onclick events is to use the model- window.open(‘URL’, ‘NAME’, ‘FEATURES’, ‘REPLACE’) the replace function is boolean, so we will just leave that alone- true 
Let’s just focus on how to get what we need, done. Now, before I go any further- I am 100% sure there is a better way to do this, I just went with the first way I knew how and I am not that good with JS, so…take it or leave it. First step is to write a simple little function that you can call, something like this:
Just place that script in the head of your document and you will be ready to go to the next step. Go to the div that we named "test" and add the following line within it, like so:
Now, that is basically going to call the popitup javascript we wrote in the head of our document and deliver that URL in a 350×420 window. For this example, we wanted the div to open a pop up window with a contact form in it, so we set that to the correct URL. The styling is to make sure that the div LOOKS like a link when you roll over it. We want to make sure it is dummy proof and people don’t just click and guess. So, now we are done with how to make that div become a link and open up as pop up. We need to now make the second page- I chose to keep it really simple for this tutorial, and just throw in a simple contact form. You may use the popup page for whatever your heart desires. Be creative, but don’t over-do pop ups…no one really likes them.
Save that file and call it a day. Pretty easy but there is definitely room to improve on this tutorial. I hope it helped you guys and please feel free to leave comments with any better/other ways to do this. You can download the above tutorial’s source files here if you would like. So, now on to javascript pop-up’s in general.
Download the Source Files Here
Creating JavaScript Pop up Windows 101
Here is how you open a brand new window on any old link.
Open a new window
This opens a new window with hello.html page. You can make the html page it opens, whatever you like- obviously.
What, you want to argue!? The arguments of JavaScript open()
The open() method takes 4 arguments:
window.open('URL', 'NAME', 'FEATURES', 'REPLACE')
I just showed you how to provide the URL of a document through the first argument and it will be loaded in the new window.
NAME: specifies a name for the new window that can then be used as value for the TARGET attribute of <A> tags.
FEATURES: let you define properties of the window such as width, height, presence or absence of scrollbars, location bar, stauts bar etc. The list of features is a mile long, so we will go slow.
REPLACE: takes a boolean value… we won’t bother ourselves with this because it is the work of the devil! jk 
Open a new window
Here is a ist of important features that we will use a lot
- height: Specifies height of the window in pixels.
- width: width of the new window in pixels
- location: determines the presence of the location bar
- menubar: menubar
- scrollbars: scrollbars
- status: status bar
- toolbar: toolbar
- directories: specifies the display of link buttons
- resizable: determines whether the window can be resized. If it’s absent or its value is set ‘no’, the window does not have resize handles around its border.
- fullscreen: Specific to the Internet Explorer (good old IE, making web development hell since it’s inception), it determines whether the window is displayed in the full screen mode.
Open a new window
Above opens a new window 300 pixels in width and 200 pixels in height. Pay close attention to how the features are written. The two features (width and height) are enclosed by a pair of quotes without any spaces and there are no quotes surrounding the values.
You may have noticed something in the new window.
It didn’t have any scrollbars, location bar, status bar, menubar, toolbar or buttons! Perfect….or…uhhhh….we want them?
We’ve already seen that the features argument is optional and consists of a comma separated list of features. If this argument is omitted, the new window has all features present in it. However, if at least 1 feature is around, the JavaScript interpreter will consider only the ones that appear ignoring the features that are not there.
The width and the height take a number (pixels) as value, for other features the value is either a yes or no.
Open a new window
This window has the menu and the status bars. The others are absent since we didn’t specify them.
Open a new window
Our event handler script is becoming unmanageble… it’s ridiculously long. You may want to look at JavaScript functions and how they can contain blocks of code that can be used again and again. That will make life easy if you plan on going ape shit with pop ups.
Oh yea, here is a small novelty for Internet Explorer users…because we all love IE….
The fullscreen feature is specific to IE (greaaaaatttt) and displays the document on the entire screen. A neat-o-gang effect if you like being seriously annoyed. Click F11 on a PC to remove the full screen display. It’s realllly annoying but could be useful for you black hats out there.
Open a full screen window
OK, That’s a wrap. Like I said, please leave comments and suggestions/tips/tricks. They are always appreciated.
