A pop-up window is a new window generated by the browser as a result of a user action. It is intended to be used for supporting information where the user closes the window when finished with it; however by default, the pop-up window has full browser controls and is resizable, so the user may continue to navigate in that window as desired. The pop-up template includes a header (logo, title, horizontal rule) and footer only; it does not contain the additional Cisco.com framework navigation.

Use the pop-up template vendor kit only if the pop-up is a stand alone page and not a part of the Cisco.com information architecutre. For questions about appropriate pop-up window vendor kit use cases, contact the UE team.

>   Download Pop-Up Template

General UE Guidelines

• Use the pop-up template only when users need to complete a parallel task without losing the main window where the pop-up is a point of "temporary focus".
• Pop-up window should appear only when the user clicks a link. The use of time-delayed pop-ups (often measured in seconds) or pop-unders that spawn under the parent window are not allowed on Cisco.com.
• Content in a pop-up should be contained in the same browser window. We recommend that all links in the pop-up template framework open in the same window. Based on content owner's discretion and observing user experience standards, links in the content may open in a new window. Contact the UE team for guidance in this area.
• Your pop-up page title should be no longer than two lines of text in the desired page width. For the default page size, 550 pixels, the title should not be more than 80 characters (including spaces).
• The pop-up window, by default, opens in 550x550 pixels. Minimum width is 300 pixels. You may change the default window size if the content is better formatted and communicated in a different size.
• Browser controls are present by default. Browser controls may be removed if sufficient navigation is provided for users, and users are expected to content owner depending on content requirements.

Use Cases

Static Content

• Help in some cases can be an example for this use case where information (text and static images) is expected to be used to allow users complete a parallel task without losing the main window.
• Content CSS can be used in the template within the main content div with class "sitecopy".
• Default pop-up window size for this case is the 550x550 pixels, but web developers will have the option to change the size if content requires a different size.

Multimedia Presentations

• Content area will be utilized for multimedia content using, flash, movies, etc.
• Embedded padding around the content area can be removed so the content can be laid out chrome to chrome width of the page.
• Default pop-up window size for this case is 550x550 pixels, but web developers will have the option to change the size if content requires a different size.

The template can be formatted in two styles depending on the type of content:

• Multimedia Presentations where the content takes over the whole content area requires no padding.
• Regular text and image content where padding and styling of content is needed.

Switching between the two styles can be easily done by changing a div id.

Pop-up Template

Header

The header for the pop-up, the subject of the content of the window, is entered between the <h1></h1> tags, and must not exceed two (2) lines of text when the window is at 550px wide. See the User Experience Guidelines tab for more details.

Footer

The footer is is not editable and is a requirement for all cases.

Multimedia Presentations – No Padding Template

The default window size is 550 x 550; however, you can optionally set the window size to best fit the content. This template includes a Page Title, which is also optional.

Content area width shrinks or expands as browser does - no minimum or maximum width. There is no set maximum height; the window will have scroll bars if needed.

Regular Text and Image Content – Standard Full Padding Template

This version of the pop-up is used for regular, non-multimedia content.

This template is optimized for use with the Content CSS. If the Content CSS is not used, the margin will be 10 pixels narrower.

How to Switch between No Padding and Full Padding Styles

Switching is easy: The main content div in the template has an id of either "popup-content-nopadding" or "popup-content-padding".

For example:

<div id="popup-content-nopadding">
  <p>MULTIMEDIA CONTENT HERE IN "POPUP-CONTENT-NOPADDING" ID'd DIV</p>
</div>


Or

<div id="popup-content-padding">
  <p>REGULAR CONTENT HERE IN "POPUP-CONTENT-PADDING" ID'd DIV</p>
</div>

Either one of these will automatically load the appropriate styles.

How to Code the Link to a Popup Window

For accessibility compliance, please use a function call in the onclick handler for the anchor and return false, duplicate the target URL in the href of the anchor, and use a target attribute value of "globalCDCpopup". This will ensure that users with JS turned on will get the popup and users without JS will get sent to the same page in a new window. For example, to build an accessible popup link to http://example.com:

  <a href="http://example.com" onclick="return global_openCdcPopup({address:'http://example.com'});" target="globalCDCpopup">

The optional parameters for specifying height, width and controls can be added in any order as follows:

  <a href="http://example.com" onclick="return global_openCdcPopup({address:'http://example.com',height:500,width:500,controls:false});" target="globalCDCpopup">

The following table details the available parameters along with their default values:

Examples:

No controls (using default height & width):

  <a href="http://example.com" onclick="return global_openCdcPopup({address:'http://example.com',controls:false});" target="globalCDCpopup">

Height override only (default width & controls)

  <a href="http://example.com" onclick="return global_openCdcPopup({address:'http://example.com',height:300});" target="globalCDCpopup">

No controls and setting width: (default height)

  <a href="http://example.com" onclick="return global_openCdcPopup({address:'http://example.com',controls:false,width:450});" target="globalCDCpopup">

NOTE: address is always mandatory.

How to adapt the template for global sites

In order to adapt the template for global sites, make sure the charset is set correctly for the corresponding country. For example, to adapt the template for Japan, replace this:

  <meta content="text/html;charset=iso-8859-1" http-equiv="Content-type" >

with this:

  <meta content="text/html;charset=shift_jis" http-equiv="Content-type" >