concept close button in category css

This is an excerpt from Manning's book CSS in Depth. Login to get full access to this book.

6 Closes the modal when the user clicks the Close button

Listing 7.4. Replacing the Close button with an x

.modal-close { position: absolute; top: 0.3em; right: 0.3em; padding: 0.3em; cursor: pointer; font-size: 2em; height: 1em; 1 width: 1em; 1 text-indent: 10em; 2 overflow: hidden; 2 border: 0; } .modal-close::after { position: absolute; line-height: 0.5; top: 0.2em; left: 0.1em; text-indent: 0; content: "\00D7"; 3 }

copy

7.2.1. Absolutely positioning the Close button

To see how this works, let’s reposition the Close button to the top right corner of your modal dialog. After doing so, the modal will look like figure 7.2.

Figure 7.2. Close button positioned at top right corner of modal dialog

To do this, you’ll declare absolute positioning for the Close button. Its parent element is modal-body, which has fixed positioning, so it becomes the containing block for the button. Edit your button’s styles to match listing 7.3.