SSteven Posted November 3, 2018 Share Posted November 3, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted November 3, 2018 Share Posted November 3, 2018 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. Link to comment Share on other sites More sharing options...
SSteven Posted November 9, 2018 Author Share Posted November 9, 2018 So when I click on the close button, the .modal:target selector is not activated, and so the modal is automatically closed? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2018 Share Posted November 9, 2018 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;. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted November 9, 2018 Share Posted November 9, 2018 Yes, it is automatically hidden with CSS by using display: none. .modal { display: none; 1 Link to comment Share on other sites More sharing options...
SSteven Posted November 10, 2018 Author Share Posted November 10, 2018 This is a cool trick. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now