A pop-up window is simply another resource for displaying content. Many advertisers abuse them, however, thus giving pop-up windows a bad reputation. They can be implemented in a friendly fashion that won't make your visitors angry -- and they can be very useful in certain circumstances, such as on an intranet. Alejandro Gervasio explains.
It’s strongly recommended that you include the function within a separated file, as is usually done in many websites. This provides a centralized control for all of the pages we want opening our friendly pop-up windows. The function will offer good overall control for the browser style, position, and size, and be extremely portable for different applications.
In order to make sure that the links will still work in the page if scripting is disabled, all of the links will have a target attribute "_blank". This way, our function will evaluate each <a> elements with that target, turning them into links that open pop-up windows wherever possible. Otherwise, the links will simply open a standard browser window. Here’s our core function:
var winAttributes='scrollbars=0,location=0,left=0,top=0, width=500,height=400';
Looping through all <a> elements of the Web document, we check to see whether they have a target attribute set to "_blank". If they do, we define the "popwin()" function that will apply the "window.open" method when the link is clicked, or when a key is pressed while the link is focused. This helps out in terms of accessibility. Then the "powin()" function returns false, making sure that the link is not opened in the opener document, only opened in the pop-up window.
If we want only links belonging to specific parts of the page to open pop-ups, we might define page sections where links will be affected by the function. Let’s assume that we’ve defined a content section such as <div id="content">. In this case, we’d replace the line:
So, we can improve the initial function to include the ability for displaying the corresponding "close window” link when applicable, enabling the possibility to define a specific style for that link. Now, all we need to do is to wrap the function into a conditional statement that checks whether there is a "window.opener" object, and then behaves accordingly. This is our new function:
var winAttributes='scrollbars=0,location=0,left=0, top=0,width=500,height=400';
As shown above, we’ve wrapped up the function to check if there is a “window.opener” object. If there is not -- that is, the window is not a true pop-up -- then we turn the links with its target set to "_blank" to open pop-up windows, and apply “onclick“ and “onkeypress“ event handlers to them. The pop-ups will have a size of 500px and 400px respectively. Otherwise, if a “window.opener” object exists, this means that we’re dealing with a true pop-up -- we create a new link element, assigning it the text “Close Window” through “createTextNode()“ and “appendChild()“ DOM methods. Then, we set its “href“ property to “#“, in order to make it appear as a real link, and finally apply the function “self.close()“ to obviously close the window, either when the user clicks on the link or a key is pressed while the links has been focused. This is done with the following lines:
The last remaining step is to insert the link within a paragraph element, and make it appear as the first child element of the Web page. We achieve the desired result using the “insertBefore()“ method, in the following manner:
As we can see, our function has been greatly improved, by adding the close link to each pop-up window, expanding considerably its functionality. However, the link will be displayed on the pop-up without any CSS style, certainly looking very rough in its current implementation. Surely, we might spice up the paragraph element a little bit with some style rules, such as:
font: bold 12px "Arial", Helvetica, sans-serif;