Javascript - Window Title Close Button - Failures

Developing a Close Button for a javascript window was significantly more challenging than it should have been. (I can't be the first person who needs this!) The successful approach I decided to use is documented documented on another page.

Since that page is already too long, I discuss the various failures here.

This page was developed using Chrome and Windows XP. When tested with other browsers, it is a complete mess. IE 8 on Windows XP is the worse - when the button is moved to the right, it is rendered below the Title Bar separator. In several of the Windows 10 browsers, the button height is less than the Title Bar height. The only solution is to have the code measure Title Bar height and adjust the button size accordingly - which I have not bothered to do here.

Background | Test fixture | Using an "input button" | Using the "button" tag | Anchor Tags | References


When developing this page, I was trying to create a javascript based color picker similar to the one provided in Chrome and Firefox - mainly because the Microsoft browsers (Edge and IE) don't provide one. The color selection part is easy. However, there are 2 very difficult features that I consider mandatory in my implementation. This page concerns itself with only the Close Button. To see what I am trying to accomplish, just click the button above (not present in Edge or IE), or open any dialog box in another application. (In an application menu, dialog boxes are typically indicated by placing 3 dots after the menu option, as in File/Open....)

Test fixture

One technique to correctly place a single character in a title bar is described here. Most of that is not repeated here.

The primary testbed for the examples on this page is based on the Window Title Bar described here, but with modified styles and without the ability to drag it around the screen.

To manipulate the styles, right click on the object of your choice and select inspect (in Chrome, other browsers have something similar). The provided debug window allows you to add, modify, and disable any style.

Using an "input button"

The most obvious way to add a Close Button is to actually use a regular button and modify its properties (styles) until it works. A good start. The next example adds a float: right; style. Better - however the button is not quite in the corner. Specifically, The following style fixes the position for Chrome in Windows XP. The next problem is the size of the X. The obvious option is to simply use a capital-X (duh), but that may be unreliable because the default font is system dependent. As a result, developers have no idea how their application will display. (A very serious problem.) To me, on the current system, that looks pretty good and seems like a reasonable place to stop. However, most of the online examples (that I found) prefer to use the × sign (×) and to enlarge the font to improve visibility (×). Unfortunately, there are a number of side effects. Well, at least the 'X' looks great. Using more styles, the size of the button is easy to fix - the position of the 'X' ... not so much! The original buttons were So the next example forces a new button size. Now to move the 'X'. - text-indent: -4 fixes half the problem. And now I am stumped - I can't find a code to move the text up. This is why I don't use a button to close windows.

Using the "button" tag

These examples use the button tag. Unfortunately, the results are almost identical to using the input type=button tag. As you can seen, the 'X' is on top of the border separating the title from the rest of the dialog box - in the previous section, that did not happen.

Using <sup>×</sup> had an interesting effect, but it reduced the size and I was not able to make further vertical adjustments.

For completeness, this example uses the letter-X. Same as before - no big deal.

Anchor Tags

Several examples (such as How TO - Off-Canvas Menu) implement the Close Button as Personally, I think this is a terrible example - this item will be rendered identical to (color, font, styling) the other anchor tags (links). However, that isn't the function performed - it doesn't link to anything! In addition, when the mouse hovers over the pseudo-button (link), the Status Bar indicates that javascript:void(0) will be executed when the pseudo-button is clicked. (Try this in the example below.) I consider this to be confusing and user hostile - not something I want on my pages. (And yes, I have seen this on other pages and it is confusing.)

I assume that they do this to get the a:hover color change and the related mouse cursor. (No, they don't explain anything!) However, I think it is much better to make the Close Button its own class and to modify the various styles as appropriate.

In other words - I reject this suggested technique provided by w3schools.

Note: For this example, the styles were modified to changes the colors and to fit the template.


The material above relies heavily on data from these references. Unfortunately, they did not provide a working solution (an example) that met my requirements. In addition, I found these to be incomplete and hard to understand. (I didn't find the hidden help, described below, until after this page was almost complete.)

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