In the article "Using Clientside Code to Change the Property and Behaviour of a Column in a List"  I gave an example of changing the hyperlink on a column to open in a new window.  The trick that I had used was to alter the hyperlink so that a target window was used.

But that technique opened a completely new internet explorer window.  What do we do if we want control window size, scroll bars etc?

Keeping it Simple 

I want to keep things as simple as possible.  In this situation I want to be able to click on a hyperlink in a list and have a screen popup. 

I have made the following assumptions

• The hyperlink property is going to be set in the meta data defintion of the screen
• There is only going to be only one column defined in the screen that needs a custom hyperlink
• The properties of the popup screen are be set with the function to simplify the change made to the list hyperlinks.

This code entered into the custom content of a list block will search for a particular system action or custom page.  In this example it is looking for a custom jump hyperlink to the ASP page "caseedit.asp".  
 
<script>
window.attachEvent("onload",newWindow);
function newWindow()
{
// hide the button
for(i=0;i<document.all.length;i++)
{
if(document.all[i].tagName=='A' )
{
if(document.all[i].href.search(/caseedit.asp/i)>-1)
{
var strURL = document.all[i].href;
document.all[i].href = "javascript:popUp('"+strURL+"')";

}
}
}
}

function popUp(URL) {
day = new Date();
id = day.getTime();
window.open(URL, id , 'toolbar=0 , scrollbars=0, location=0, statusbar=0, menubar=0 , resizable=0, width=600, height=400, left = 340, top = 200');
}
</script>
 
If you wish to 'pop up' a .NET assembly the system action would be 432 and the code would have to change to
 
if(document.all[i].href.search(/Act=432/i)>-1)

If you wish to 'pop up' a standard system action e.g. 220 for the default "person summary page" the code would have to change to

if(document.all[i].href.search(/Act=220/i)>-1)

Note:

It is strongly recommended that you only popup custom pages built using either ASP page or .NET assemblies as this provides the correct ability to control the HTML displayed in the popup window including tabs and the effect of buttons to close the window correctly.

 And...

The properties that the window.open method uses are

• status - The status bar at the bottom of the window. (boolean)
• toolbar - The standard browser toolbar, with buttons such as Back and Forward.(boolean)
• location - The Location entry field where you enter the URL.(boolean)
• menubar - The menu bar of the window.(boolean)
• directories - The standard browser directory buttons, such as What's New and What's Cool. (boolean)
• resizable - Allow/Disallow the user to resize the window.(boolean)
• scrollbars - Enable the scrollbars if the document is bigger than the window. (boolean)
• height - Specifies the height of the window in pixels. (example: height='350').
• width - Specifies the width of the window in pixels.
• top - Specifies the Y coordinate of the top left corner of the new window in pixels.
• left - Specifies the X coordinate of the top left corner of the new window in pixels.

Making it Modal

Internet Explorer adds an entirely new method to the window object to open a modal window - window.showModalDialog(). If you use that to try to open a modal window then if your visitor is running Internet Explorer then a modal window will be opened. If they are running some other browser then all they will get is a Javascript error.

The Mozilla based browsers (Netscape 6+, Firefox, etc) use a completely different method to declare that the window that is opened should stay in front . They use the normal window.open and just add an extra attribute modal=yes to the list of atributes that define the appearance of the window (unfortunately it still doesn't actually make it modal it just forces it to stay in front which is the best that you can do with these browsers).

<script>
window.attachEvent("onload",newWindow);
function newWindow()
{
// hide the button
for(i=0;i<document.all.length;i++)
{
if(document.all[i].tagName=='A' )
{
if(document.all[i].href.search(/caseedit.asp/i)>-1)
{
var strURL = document.all[i].href;
document.all[i].href = "javascript:popUp('"+strURL+"')";

}
}
}
}

function popUp(URL)
{
day = new Date();
id = day.getTime();
if (window.showModalDialog)
{
window.showModalDialog(URL, id ,'dialogWidth=400,dialogHeight=600')
}
else
{
window.open(URL, id , 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=600, height=400, left = 340, top = 200, modal=yes');
}
}
</script>