How do I create a link that pops up in a new browser window?

Options
Jeffrey Kingsland
Jeffrey Kingsland Blackbaud Employee
Ancient Membership Facilitator 1 Photogenic
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

Overview

In some cases, you may want to create a link that opens a new browser window rather than replacing the content in the existing browser window.  This document describes two ways to create a link that will open in a new browser window.

Design Considerations

Most browsers will block popup windows, which can be annoying to anyone who clicks on the link.  You may want to consider how this would affect someone visiting your site.

Solution #1 - Add the target attribute to the anchor tag.

This is the simplest way to open the link in a new browser window.

  1. Navigate to your PageBuilder page.
  2. Edit the HTML content.
  3. Select "Source View" in the WYSIWYG editor.
  4. Locate the link in question.  It will be preceded by an anchor tag (<a>).
  5. Add target="_blank" after the href attribute.
  6. Click Apply.
  7. Click Finish.

Example:

If you anchor tag looks like this:

<a href="https://secure2.convio.net/customer/site/SPageServer?pagename=homepage">Link to Convio Customer Center</a>

Then you will add the target attribute, leaving all other information the same:

<a href="https://secure2.convio.net/customer/site/SPageServer?pagename=homepage" target="_blank">Link to Convio Customer Center</a>

Solution #2 - Add javascript

Although more complicated, this solution will give you more options to configure the popup window.

  1. Navigate to your PageBuilder page.
  2. Edit the HTML content.
  3. Select "Source View" in the WYSIWYG editor.
  4. At the top of the content, add the following text:

<HTML>

<BODY>

<SCRIPT TYPE="text/javascript">

function popup(mylink, windowname)

{

if (! window.focus)return true;

var href;

if (typeof(mylink) == 'string')

  href=mylink;

else

  href=mylink.href;

window.open(href, windowname, 'width=400,height=200,scrollbars=yes');

return false;

}

</SCRIPT>

  1. At the bottom of the content, add the following text:

</BODY>

</HTML>

  1. Locate the link in question.  It will be preceded by an anchor tag (<a>).
  2. Add onClick="return popup(this, '')" after the href attribute, where is the title of the new popup window.
  3. Click Apply.
  4. Click Finish.

Example:

The HTML before:

<a href="https://secure2.convio.net/customer/site/SPageServer?pagename=homepage">Link to Convio Customer Center</a>

The HTML after:

<HTML>

<BODY>

<SCRIPT TYPE="text/javascript">

function popup(mylink, windowname)

{

if (! window.focus)return true;

var href;

if (typeof(mylink) == 'string')

  href=mylink;

else

  href=mylink.href;

window.open(href, windowname, 'width=400,height=200,scrollbars=yes');

return false;

}

</SCRIPT>

<a href="https://secure2.convio.net/customer/site/SPageServer?pagename=homepage" onClick="return popup(this, '')" >Link to Convio Customer Center</a>

</BODY>

</HTML>

Tagged:

Categories