Javascript - Window Title Close Button - Basics

In most applications, the window has a Close Button in the title bar. When writing in Delphi, there is a property to include the button.

Unfortunately, using javascript, I had to develop

from scratch.

Of course, there are plenty of examples and demos online, but nothing like what I wanted.

This page is only concerned with the visual appearance of the Close Button, the code to make it work is trivial and covered elsewhere.

The solution presented below not perfect, but it is almost adequate. It is a complete failute in IE 8 - apparently top: -8px does not work!

A number of my failed attempts are documented on a related page.

Requirements | Making it Work | References


In Windows applications, the Close Button is normally in the upper right hand corner of the window (actually in the Title Bar along with the Minimize and Maximize buttons).

In Windows XP, the operating system contains a file of common icons (glyphs) which are used for various purposes - 3 of those are for the title bar Close Button

Windows 10 uses different icons for the Close Button - in fact, it no longer looks like a button!

Chrome (a cross platform browser) uses yet another icon.

So, the first question is - Which "standard" should I follow?

In the old days, there used to be design guidelines. However, since the "guidelines" change every time some big shot comes out with a "new" (rehashed) operating system - well, there are no guidelines.

Making it Work

The w3schools examples at How To Create a Modal Box use the times symbol (× - ×) instead of the letter-X. When their Open Modal button is clicked, a pretty crappy dialog box opens - there is no way that I would use something that ugly in an application. However, the Close Button is in the upper right close to where it belongs. Unfortunately, the actual code examples on that page do not explain how that is done - instead, they produce a different, even crappier, dialog box. (They make it work by using ::before and ::after pseudo-tags to force table formatting - something not explained on that page.)

The following styles are from that reference. Since I am only interested in the button, I have

This is their example Modal dialogbox - totally unacceptable.

Besides the obvious problems of no Title Bar and no way for the user to reposition the window,

The following example removes the padding

Better, but still not what I want. The following example provides just a little padding on the left and adds a dummy Title.

Much better, but the X is still too low. By adding position: relative and a negative vertical offset, the position of the X is now acceptable.

In the example, position: absolute; makes the button appeared at the top of the screen and not inside the dialog box.

However, when the outside div block style contains position: fixed (which is used in real dialog boxes), then both position: relative and position: absolute work.


The material on this page is summarized and rearranged based on data from these pages. Basically, I found the references incomplete hard to understand. There are many additional pages at - but I see no reason to list them all.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Window_Title_Close_Button_Basics.html