Modals 101: What's a Modal?
Modals are essentially javascript pop-ups within a browser, they're great to use for additional information when you have multiple products or items on one page.
Below is a button that will open a Modal which is it's sibling element (aka, they have the same parent container).
Modal 1: Try Scrolling Down
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Modals 102: Essential Elements for a Modal
Below I'll list out and describe what the essential elements are to make a modal.
Item Title
Item description, a picture, a link, anything can go right here. This is essentially your quick snippet about the item. And below is a modal button to learn more about the item without leaving this page.
The button below is not functional
This is your Modal Container
This is your Modal Background, you can put a close button inside of it (just to give a verbal visual cue to close the modal)
This is your Modal (notice how it's a sibling to your modal background & not a child element)
You can put anything you'd like to inside of this modal.
Ninja Style Javascript
Be sure to copy & paste this into the page level footer code injection to keep the page from scrolling when a Modal is open
(NOTE: The class names are specific to the ones used in this tutorial, and the js will need to be modified if you use different class names on your site with updated class names)
Modals 103: Styles for Each Element To Make a Modal
When you have multiple modals on one page, editing them can be quite tricky,
so I've developed the following methods to use when creating them.
Modal Container
The first element you have is your Modal Container, this holds all of the elements to make-up each modal (aka, it's your parent container). All other items below are nested inside of this parent container.
Display: None (set it to Display: Block to make any changes to the modal, but remember to remove this when you're done editing the modal)
Width: 100%
Height: 100vhPosition: Fixed, Full
Z-Index: needs to ascend as you build on more (have them varying by adding subclasses for each modal)
Make sure that each Modal Container has a Sub Class before changing the Z-Index(I like to use numbers, so just 1, 2, 3 etc.)
Modal Background
The Second element you have is your Modal Background, this is a Sibling element to your Modal, here are the styles needed.
Display: Block
Width: 100%
Height: 100%Position: Absolute, Full
Background Color: Give it a background color to let your modal stand out (typically a white/black/grey at 75-90% opacity does the trick here)
Z-Index: needs to be lower than your modal
Close Button
The Third element you have is your Close Button, this is a Sibling element to your Modal & Modal Background, here are the styles needed:
Display: Block
Width: Your Choice
Height: Your ChoicePosition: Absolute, Top-Right, or bottom, totally up to you.
Background Color: Your Choice
Background Color: Your Choice
Z-Index: needs to be Higher than your Modal
Modal
The Fourth element you have is your Modal, this is a Sibling element to your Modal Background & Close Button, here are the styles needed:
Display: Block
Width: 100%
Height: Auto (your choice, if you'd like to add a max height, be sure to set Overflow: scroll if you give it a set height to make sure content stays in the modal)Margin: Centered
Position: Absolute, Full
Background Color: Your Choice (different from the background)
Background Color: Your Choice
Z-Index: needs to be Higher than your Modal Background
You can put anything you wish inside of a Modal when it comes to content. :) It's most often used for product/item details, but can be used for just about anything you'd like such as: Featuring content, holding a contact form, privacy statements, basically content that is accessible when it's needed by the user but doesn't have to be up front cluttering everything up.
Modal 2: Try Scrolling Down
Fun cat pictures still crack me up. "Lettuce talk about this."
Modals 104: Setting Up the Interactions
Setting up the interactions for a modal are actually quite simple once you've followed the steps above for creating each Modal Container.
You essentially just need an Open and a Close interaction created.
Modal 2: Aren't These Neat?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Open the Modal
You will bind this Click Interaction to the Modal Buttons/Links
1. Check the Affect different element(s) checkbox
2. Check the Limit to sibling elements checkbox
3. Type in Modal Container class name (hit return/enter)
4. Step 1: Display Block, Opacity: 0%, set ease to Zero ms
5. Step 2: Display Block, Opacity: 100%, set easy to 500ms
Close the Modal
You will bind this Click Interaction to the Close Button & Modal Background elements
1. Check the Affect different element(s) checkbox
2. Check the Limit to sibling elements checkbox
3. Type in Modal Container class name (hit return/enter)
4. Step 1: Opacity: 0%, set ease to 250ms
5. Step 2: Display: None
.jpg)
.jpg)
