Try this one maybe. A bit fiddly at first.
First you want to create your modal window. Which I’d imagine to be something like:
<div class="modal-window">
<div class="close-window">
</div>
<div class="profile-full-name">
<div class="modal-box">
<h1>Name</h1>
<p>Information</p>
</div>
<div class="profile-full-name-2">
<div class="modal-box">
<h1>Name</h1>
<p>Information</p>
</div>
<div>
etc.
</div>
Set modal-window to 100% width / height, position fixed. Display: Flex (column, centre align).
Style your modal-box however you’d like.
Leave .profile-full-name without styling for now. This will only be used as part of the trigger.
Once you’ve got that, create your interactions, something like this:
Show Modal (This interaction will be on each of your profile images, and the “profile-full-name” will be set individually, meaning you should have 1 interaction per person)
- (Targeting “modal-window” On click: Set display: Block)
- (Targeting “profile-full-name” On click: Set display: Block)
Close Modal (This will be on your ‘X’ or ‘close’ icon, however you want it)
- (Targeting “profile-full-name” On click: Set display none)
- (Targeting “modal-window” On click: Set display none)
.profile-full-name Classes (This will be set on the profile classes inside the modal-window)
On each .profile-full-name class…
Say you’ve got .profile-john-doe, .profile-keith-lennon, etc…
Set them to ‘display: none’. This will also make them easier to edit as you create and fill the information in on each one.
Finally, set the “modal-window” to display none.
If you fancy upping the difficulty, you could even create a way of moving through the profiles whilst the modal window is open. You’d need another interaction per person that targets the “profile-full-name” that you want to show, and the rest that you want to hide.
Voila. Let me know if I missed anything.