Jump to content
SSteven

Closing a modal box

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;.

  • Like 1

Share this post


Link to post
Share on other sites

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

.modal {
  display: none;

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×