The WEB Made Simple

Web Design Solutions, Firepower Marketing, 
Insider E-Books



Article - How to create simple chromeless popup windows. 

Hate 'em or love 'em; popup windows are a constant companion during our Internet surfing. But they can be quite useful, especially the chromeless variety.

A chromeless popup window is one that doesn't show the browsers menu or tool bar, but does retain the title bar (for easy closing). Some visitors have so many options on their tool bars that they take up over a quarter of the screen height!

Chromeless popup windows are a great way to deliver list information and extra help for filling in forms without bogging down your pages.

There are many scripts available for creating popups, but sometimes you'll just want something simple that won't require you to incorporate 100 lines of JavaScript!

This particular chromeless popup window procedure will work in Netscape and IE Versions 4+. It will create a link activated window of a fixed size, but will allow for scrollbars if necessary.

To view a demo, click on the "20 second site survey" link on the right hand menu of our home page: 

First, create and save a standard page with the information you wish to be displayed in the popup window. The elements should be placed within a table structure. Suggested width of table: around 330 - 350 pixels. 

And if you want to create a "Close this Window" statement in the page: 

<a href="javascript:self.close()">Close this window</a></td> 
If you choose not to include this snippet, visitors will still be able to close the window via the popup window title bar controls.

Second, the script to launch the chromeless popup window. Copy and paste this into the HTML (between the <body> and </body> tags) of the page you wish to launch the popup from (change the properties in capital letters to suit):

function openpopup(){
var popurl="PATH TO PAGE YOU CREATED","","width=390,height=490,scrollbars,")
<!-- End --> 
You can change width and height to suit, but don't make it too narrow, otherwise site visitors will need to scroll horizontally to view the content. Too wide a setting will cover the majority of the screen area for those users still running 640x480 resolution.

When copying scripts like the one above, ensure you paste it into Notepad first; then copy it again and transfer it to your HTML. Copying and pasting code straight from a web page can produce some pretty weird results.

Next, the hyperlink to use to engage the script (Change the properties in capital letters to suit): 

<a href="javascript:openpopup()">CLICK HERE</a> 

If you are looking for a script to create an automated site entry or site exit popup window, check out our free javascript code generators section, specifically: /windowsframesjavascripts.htm

but, use with caution - I don't know many visitors who upon entering a site and seeing a popup window yell, "whoopeee!!!"

Michael Bloch
Tutorials, web content and tools, software and community.
Web Marketing, eCommerce & Development solutions. 

One More Frameless Popup

Inserting the <script> in your page

Put the following <script> </script> in the head
section of your launching page. 

Set the variables as indicated in the script.


// Amazing Frameless Popup Window - Version I
// (C) 2000
// Free for all users, but leave in this header

// set the popup window width and height

var windowW=214 // wide
var windowH=398 // high

// set the screen position where the popup should appear

var windowX = 260 // from left
var windowY = 100 // from top

// set the url of the page to show in the popup

var urlPop = "yourpage.html"

// set the title of the page

var title = "This Is A Frameless Popup Window"

// set this to true if the popup should close
// upon leaving the launching page; else, false

var autoclose = true

// ============================
// do not edit below this line
// ============================

s = "width="+windowW+",height="+windowH;
var beIE = document.all?true:false

function openFrameless(){
if (beIE){
NFW ="","popFrameless","fullscreen,"+s) 
var frameString=""+
"<frameset rows='*,0' framespacing=0 border=0 
"<frame name='top' src='"+urlPop+"' scrolling=auto>"+
"<frame name='bottom' src='about:blank' scrolling='no'>"+
} else {,"popFrameless","scrollbars,"+s)

if (autoclose){
window.onunload = function(){NFW.close()}



Triggering the popup window

Call the openFrameless function from a link, like this:

<a href="javascript:openFrameless()">click here</a>


CLICK HERE to see the Frameless Popup


I try to deliver more than I promised so here are a few choice web pages for you. They are self-intact which means you can just load them up to your server. 

Site Search Engine

Web Search choosing which search engine...and staying at your site.

Menu Builder ... the name says it all. Just more customer service for traffic building.

Rate Our Site... always act like you really care and your visitors may shower you with gifts!

Easy Steps | HTML Tutor | CSS Styles | DHTML | Javascript | Pop-ups | Advanced | Software | Webmasters