Javascript Window Title Close Button

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

The Window
The Title Bar, and
The Close Button

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

Requirements

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

Default image
Mouse over image
Mouse down image

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

Removed the styles used to place the dialog box in the middle of the screen on top of everything else
Removed all the associated javascript
Changed the colors

/* Modal Content/Box */
.modal-content {
  background-color: #fff8f8;
  padding: 20px;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

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 top and bottom borders around the text are way too large
The closing x-button is way too far from the top

The following example removes the padding

.modal-content-noPadding {
  background-color: #fff8f8;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

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

.modal-content-lessPadding {
  background-color: #fff8f8;
  padding-left: 5px;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

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.

.close_relative {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  top: -8px;       /* these bottom 2 are required to position the x */
  position: relative;
}

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.

References

The material on this page is summarized and rearranged based on data from these pages. Basically, I found the references incomplete hard to understand.

How TO - CSS/JS Modal: This is where to start - these are the only style sheets with line-by-line comments.

How TO - Popup: How they drew the arrow on the bottom of the box is not explained.
How TO - Hoverable Dropdown
How TO - Clickable Dropdown

There are many additional pages at w3schools.com/howto - but I see no reason to list them all.

Author: Robert Clemenzi