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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...