Miva Merchant Development by Scot's Scripts

MODALS: Easy Modals using Miva Merchant Shadows Native Code

Miva Knowledge Base
MODALS: Easy Modals using Miva Merchant Shadows Native Code
Important Notice: This information is for internal reference only. Use at your own risk.
Does Google actually understand your Miva Merchant store? Our JSON-LD schema generator makes sure it does. Contact us to get started. (more info)

MODALS: Easy Modals using Miva Merchant Shadows Native Code

Scot Ranney • January 23, 2025


<a data-dialog-trigger="new-modal">Click for Modal 1</a>

<div class="c-dialog" data-dialog="new-modal" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="new-modal-title" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="new-modal-title" class="c-dialog__title c-heading-foxtrot">
					MODAL 1 TITLE
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				Modal 1 Content
			</div>
		</div>
	</div>
</div>

<hr>

<a data-dialog-trigger="new-modal2">Click for Modal 2</a>

<div class="c-dialog" data-dialog="modal-colors" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="new-modal-title" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="new-modal-title" class="c-dialog__title c-heading-foxtrot">
					MODAL 2 TITLE
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				Modal 2 Content
			</div>
		</div>
	</div>
</div>

https://www.scotsscripts.com/mvblog/modals-easy-modals-using-shadows-native-code.html

mvkb_modal mvkb_shadows