From the course: Modern CSS Techniques without JavaScript

Unlock this course with a free trial

Join today to access over 24,500 courses taught by industry experts.

Adding the popover and popovertarget attributes and styling the modal window

Adding the popover and popovertarget attributes and styling the modal window

From the course: Modern CSS Techniques without JavaScript

Start my 1-month free trial Buy for my team

Adding the popover and popovertarget attributes and styling the modal window

“

- [Instructor] Our next step is to connect the button that we just styled to our modal window. So I'm going to go through this first one together with you. We'll do Tony, and then I'll leave you to do Ailene and Kristiann on your own. So on the display side, you see that we have a button here. And when you click this button, what should happen is that this pulls up Tony's modal window here with the information about him, which is his bio and so forth. The way this is usually done, if you've ever done something with Bootstrap or Foundation or similar kinds of frameworks is that there is an association between an ID and some kind of attribute that associates the ID with the click. And this is no exception. We're going to follow that same kind of model here in this code. So the first thing that I'm going to do is in my HTML, in fact, all of this is going to be in HTML, I am going to scroll down to the start of the popover window here for Tony. And I am going to assign this an ID of Tony,…

Contents