Miva Merchant Shadows Modals Made Simple

A modal (also called a modal window, popup, dialog box, or lightbox) pops up over the main content of a webpage when someone clicks a trigger. It can be small, just a box, or it can cover the entire screen.

Modals are a great way to focus your customer's attention on something they need to do or read.

For example, the most common modal in the history of ecommerce is the modal popup on many payment screens that explains what a credit card CVV code is.

Modals in Miva Merchant

The current CSS framework in Miva Merchant is based on a proprietary blend of styles called Shadows. The modal examples here only work with the Shadows CSS framework.

Modal Example 1: Credit Card CVV

Notice the data-dialog-trigger in the link and the data-dialog in the modal. These must match for the modal to work.

You also need to make sure the aria-labelledby matches the id for the c-dialog__title section, for proper accessibility as well as making sure IDs are not repeated.

<mvt:comment>
#
# Modal Trigger
#
</mvt:comment>
  
<a data-dialog-trigger="cvv-modal">What is a CVV code?</a>
  
<mvt:comment>
#
# Modal Box/Content
#
</mvt:comment>
  
<div class="c-dialog" data-dialog="cvv-modal" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="cvvModal" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="cvvModal" class="c-dialog__title c-heading-foxtrot">
					CVV Explained
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				On the back of your credit card there is a small box with three numbers. This is the CVV code.
			</div>
		</div>
	</div>
</div></code>
  

Modal Example 2: Swatch Information

Remember to modify the data-dialog-trigger, data-dialog, aria-labelledby and c-dialog__title id to reflect what your modal is about.

<mvt:comment>
#
# Modal Trigger
#
</mvt:comment>
  
<a data-dialog-trigger="swatch-modal">Swatch Details</a>
  
<mvt:comment>
#
# Modal Box/Content
#
</mvt:comment>
<div class="c-dialog" data-dialog="swatch-modal" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="swatchModal" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="swatchModal" class="c-dialog__title c-heading-foxtrot">
					Swatch Details
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				The swatches are representations of the colors and patterns you can choose for your products. Here are more detailed version of swatches.
				<img src="swatch1.png"> etc etc etc
			</div>
		</div>
	</div>
</div>

Best Practices:

Modal Triggers: Put the modal triggers wherever you need them.

Modal Code: It's best to put the modal code itself at the bottom of the page, above the javascript/global footer. The reason is Shadows modals occasionally interfere with page layout if the modal code is embedded in the content.