Closing a modal box

[SSteven]

I refer to the following example of a modal on w3schools:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal

It doesn't contain any JS; only CSS is present.

The CSS for the close modal button is:

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

I'm not clear how this CSS is sufficient to close the modal. Yet it works, without JS. How?

Thanks.

[Ingolme]

It's the .modal:target selector that is doing the work. :target selects any element which has an ID attribute that is being referenced by the hash part of the URL.

[SSteven]

So when I click on the close button, the .modal:target selector is not activated, and so the modal is automatically closed?

[dsonesuk]

When clicked the link with '#ido1' acts as a bookmark to take you to the element with id 'id01', this becomes targetted . The 'modal' class styles the same element with 'id01' id,  by default to display: none; but when it is targetted .modal:target takes precedence and changes from display: none; which makes it hidden, to display: table; which shows the modal. Clicking the modal close link with href="#", causes it to lose focus, and therefore no longer targeted, meaning it will return to default state style of display: none;.

[Ingolme]

Yes, it is automatically hidden with CSS by using display: none.

.modal {
  display: none;

 

[SSteven]

This is a cool trick.