Building Friendly Pop-up Windows - The JavaScript function
(Page 3 of 4 )
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:
<script language="javascript">
createPopUp=function(){
var as,i,popwin;
as=document.getElementsByTagName('a');
for(i=0;i<as.length;i++){
if(as[i].target=='_blank'){
popwin=function(){
var winAttributes='scrollbars=0,location=0,left=0,top=0,
width=500,height=400';
window.open(this.href,'',winAttributes);
return false;
}
as[i].onclick=popwin;
as[i].onkeypress=popwin;
}
}
}
window.onload=createPopUp;
</script>
The JavaScript function, in its current form, is quite simple. Let’s explain what it does:
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:
as=document.getElementsByTagName('a');
with this line:
as=document.getElementById('content').getElementsByTagName('a');
Controlling the appearance of the pop-up is achieved by defining the "winAttributes" variable, as we normally do with pop-ups windows, and the whole function is executed once the page is loaded. At this point, we have a JavaScript function that will open links in pop-up windows, when it finds the target attribute "_blank" within them. Even more, if scripting is disabled, all of the links still will work. What more could we ask for? Well, there is one final piece of icing on this cake.
Once the pop-up is opened, we might rely on people to use the browser or operating system controls to close the newly opened window. But people don’t always do this. We should provide a link in the pop-up window itself to allow users to close it. That could be simply done with JavaScript, just including a "self.close();" statement. This, however, should only happen on documents that are not contained within the pop-ups windows. Otherwise, users would see a not very friendly dialogue like this:
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:
<script language="javascript">
createPopUp=function(){
if(!window.opener){
var as,i,popwin;
as=document.getElementsByTagName('a');
for(i=0;i<as.length;i++){
if(as[i].target=='_blank'){
popwin=function(){
var winAttributes='scrollbars=0,location=0,left=0,
top=0,width=500,height=400';
window.open(this.href,'',winAttributes);
return false;
}
as[i].onclick=popwin;
as[i].onkeypress=popwin;
}
}
}
else {
var closePar,closeLink,closeText;
closeLink=document.createElement('a');
closeText=document.createTextNode('Close Window');
closeLink.href='#';
closeLink.appendChild(closeText);
closeLink.onclick=function()
{self.close();};
closeLink.onkeypress=function(){self.close();};
closePar=document.createElement('p'),
closePar.appendChild(closeLink);
document.body.insertBefore(closePar,document.body.firstChild);
}
}
window.onload=createPopUp;
</script>
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:
closeLink=document.createElement('a');
closeText=document.createTextNode('Close Window');
closeLink.href='#';
closeLink.appendChild(closeText);
closeLink.onclick=function(){self.close();};
closeLink.onkeypress=function(){self.close();};
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:
closePar=document.createElement('p'),
closePar.appendChild(closeLink);
document.body.insertBefore(closePar,document.body.firstChild);
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:
p {
font: bold 12px "Arial", Helvetica, sans-serif;
color: #000;
}
But that’s not recommended. We need to add more flexibility to the function, so we can make sure that a specific CSS style can be applied to the paragraph, including font styles, color, and positioning. This might easily get done either by adding an ID to the <p> element itself or by wrapping the paragraph into a containing element, and assigning the ID to the container. Both approaches are good and valid, so they will add more portability to our code. Let’s implement that capability within our JavaScript function.
Next: Adding style to pop-up close links >>
More Design Usability Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 30 
