Building Friendly Pop-up Windows - Adding style to pop-up close links
(Page 4 of 4 )
In order to properly understand how we can add a CSS style to the close link, let’s first show the final version of our JavaScript function, and then explain what the code does:
<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,closeId;
closeId='closewindow';
closeLink=document.createElement('a');
closeText=document.createTextNode('Close Window');
closeLink.href='#';
closeLink.appendChild(closeText);
closeLink.onclick=function()
{self.close();};
closeLink.onkeypress=function(){self.close();};
if(document.getElementById(closeId)){
document.getElementById(closeId).appendChild(closeLink);
}
else{
closePar=document.createElement('p'),
closePar.id=closeId;
closePar.appendChild(closeLink);
document.body.insertBefore(closePar,document.body.firstChild);
}
}
}
window.onload=createPopUp;
</script>
As we can appreciate, the script is nearly identical to the previous one. We’ve just added the code needed to apply a style to the close link. First, we define an ID to be applied to the link, by declaring the "closeId" variable. Having defined the ID, we check whether there is an existing HTML element with that ID. If there is an element that already has that ID, we simply insert the close link inside this containing element, using the "appendChild()" method. The following lines do that:
if(document.getElementById(closeId)){
document.getElementById(closeId).appendChild(closeLink);
}
If we don’t already have an element with that ID, we create a new paragraph and assign the ID to it. Finally we add the link to the paragraph and insert it as the first element of the pop-up window, utilizing the "insertBefore()" method. This is done with the lines listed below:
closePar=document.createElement('p'),
closePar.id=closeId;
closePar.appendChild(closeLink);
document.body.insertBefore(closePar,document.body.firstChild);
The full code, including the HTML code is listed here:
<html>
<head>
<title>FRIENDLY POP-UP WINDOWS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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,closeId;
closeId='closewindow';
closeLink=document.createElement('a');
closeText=document.createTextNode('Close Window');
closeLink.href='#';
closeLink.appendChild(closeText);
closeLink.onclick=function()
{self.close();};
closeLink.onkeypress=function(){self.close();};
if(document.getElementById(closeId)){
document.getElementById(closeId).appendChild(closeLink);
}
else{
closePar=document.createElement('p'),
closePar.id=closeId;
closePar.appendChild(closeLink);
document.body.insertBefore(closePar,document.body.firstChild);
}
}
}
window.onload=createPopUp;
</script>
</head>
<body>
<a href="file.htm" target="_blank">This link opens a pop-up window(if possible)</a>
<a href="file.htm">This link opens the page in a normal window</a>
</body>
</html>
That’s all we need in the HTML code for making pop-ups work. Now we have two links. One of them has its target attribute set to "_blank", which will open the link in a pop-up window, if it’s possible. The other link will simply open the page in a normal window. Surely you’ll agree that this is very simple, right?
Whew, that’s all. Using the handy methods provided by the DOM to manipulate Web documents, we have a useful script to implement efficient pop-up windows. The whole function should be included in a .js file for being added to the documents.
We could expand the function's capabilities by adding some other features, such as giving users the ability to open the pop-ups with predefined styles, including size, position, toolbars, and so on. Using form checkboxes within opener pages would do the job nicely, and style settings would be stored in a cookie. Also, since most pop-ups are opened with their toolbars removed, we should add a link or icon to print the page, significantly increasing their accessibility. Adding your own features to the presented solution is left as an exercise for the student.
Conclusion
Hopefully, this article has demonstrated that pop-up windows can be accessible, search-engine friendly and non-invasive, when they’re properly implemented. However, as with each part of a Web project, we need to deeply analyze if we really need a pop-up window link in our documents. It’s a sensitive issue to be evaluated when we’re planning applications. One final point to note is that pop-ups should always be presented as an option if they’re going to be used in websites. Don't force your visitors to deal with pop-ups. This might be a significantly different situation with intranet applications, where users work with predefined and well-known design processes. After all, a pop-up window is yet another resource for displaying content and must be adequately considered in this light.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 30 
