Modal

The modal layout is used on top level within the DOM structure. It is used as a modal to contain content that should be displayed above the main content.

Each modal must have a UNIQUE id. This means that no modal can have the same id, I cannot stress this enough. This id is then used to toggle the correct modal.

The triggers of the modal must have the class js-modal-trigger and the custom data-attribute data-modal-target with the id of the modal that they want to trigger.

One modal can have multiple triggers. One trigger can toggle multiple modals as well by placing multiple id's within the custom data-attribute data-modal-target, separated by a space. But it is recommended to keep the amount of modals on a page to just one.

Clicking on the modal backdrop will close it as well.

IMPORTANT TO NOTE is that once the modal is open, you cannot scroll anymore on the body.

Added to basket

px 

			
				<button class="js-modal-trigger" data-modal-target="layouts-modal-basket">
	Toggle the added to basket modal
</button>
<div id="layouts-modal-basket" class="l-modal js-modal">
	<div class="l-modal__backdrop"></div>
	<section class="l-modal__container">
		<header class="l-modal__header">
			<h5 class="l-modal__title">De sessie is toegevoegd aan je mandje</h5>
			<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="layouts-modal-basket">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</header>
		<article class="l-modal__content u-padding-bottom-none">
			<div class="a-highlight a-highlight--spacing-large">
				<div class="a-highlight__content">
					<div class="a-title ">
						<h5 class="a-title__text">Grafieken en 3D-effecten met Adobe Illustrator</h5>
					</div>
				</div>
			</div>
		</article>
		<div class="l-modal__footer l-grid l-grid--with-spacing l-grid--align-middle l-grid--reverse@viewport-9">
			<div class="l-grid__col l-grid__col--6@viewport-7 u-align-center@below-viewport-7 u-align-left@below-viewport-9 u-align-right@above-viewport-9">
				<a class="a-link a-link--decorated " href="">
					<span class="a-link__text">Verder winkelen</span>
				</a>
			</div>
			<div class="l-grid__col l-grid__col--6@viewport-7 u-align-right@below-viewport-9 u-align-left@above-viewport-9">
				<button class="a-button u-width-100@below-viewport-7 ">
					<span class="a-button__text">Inschrijven</span>
				</button>
			</div>
		</div>
	</section>
</div>

Default

px 

			
				<button class="js-modal-trigger" data-modal-target="layouts-modal-default">
	Toggle modal
</button>
<div id="layouts-modal-default" class="l-modal js-modal">
	<div class="l-modal__backdrop"></div>
	<section class="l-modal__container">
		<header class="l-modal__header">
			<h5 class="l-modal__title">this is the modal title</h5>
			<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="layouts-modal-default">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</header>
		<article class="l-modal__content">
			<p>This is the content of the modal</p>
		</article>
		<footer class="l-modal__footer">
			<p>this is the footer of the modal</p>
		</footer>
	</section>
</div>

Example

px 

			
				<button class="js-modal-trigger" data-modal-target="layouts-modal-example">
	Toggle the an example overlay
</button>
<div id="layouts-modal-example" class="l-modal js-modal">
	<div class="l-modal__backdrop"></div>
	<section class="l-modal__container">
		<header class="l-modal__header">
			<h5 class="l-modal__title">Komende opleidingen</h5>
			<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="layouts-modal-example">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</header>
		<article class="l-modal__content">
			<div class="l-grid l-grid--with-spacing">
				<div class="l-grid__col">
					<div class="a-formfield ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="">
								Opleiding
							</label>
						</div>
						<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-after ">
							<select class="a-formfield__select" id="" name="">
								<option value="" selected disabled>selecteer</option>
								<option value="">option 1</option>
								<option value="">option 2</option>
								<option value="">option 3</option>
							</select>
							<span class="a-formfield__icon-after icon-arrow-down-small"></span>
						</div>
					</div>
				</div>
				<div class="l-grid__col">
					<div class="a-formfield ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="">
								Type premie
							</label>
						</div>
						<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-after ">
							<select class="a-formfield__select" id="" name="">
								<option value="" selected disabled>selecteer</option>
								<option value="">option 1</option>
								<option value="">option 2</option>
								<option value="">option 3</option>
							</select>
							<span class="a-formfield__icon-after icon-arrow-down-small"></span>
						</div>
					</div>
				</div>
			</div>
		</article>
		<div class="l-modal__footer l-grid l-grid--with-spacing l-grid--align-middle">
			<button class="a-button l-grid__col l-grid__col--6@viewport-7 ">
				<span class="a-button__text">Bevestigen</span>
			</button>
			<a class="a-link l-grid__col l-grid__col--6@viewport-7 " href="">
				<span class="a-link__text">Annuleren</span>
			</a>
		</div>
	</section>
</div>

Multiple triggers

px 

			
				<button class="js-modal-trigger" data-modal-target="layouts-modal-multiple-triggers">
	Toggle modal 1
</button>
<button class="js-modal-trigger" data-modal-target="layouts-modal-multiple-triggers">
	Toggle modal 2
</button>
<div id="layouts-modal-multiple-triggers" class="l-modal js-modal">
	<div class="l-modal__backdrop"></div>
	<section class="l-modal__container">
		<header class="l-modal__header">
			<h5 class="l-modal__title">this is the modal title</h5>
			<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="layouts-modal-multiple-triggers">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</header>
		<article class="l-modal__content">
			<p>This is the content of the modal</p>
		</article>
		<footer class="l-modal__footer">
			<p>this is the footer of the modal</p>
		</footer>
	</section>
</div>

Softlanguage

px 

			
				<button class="js-modal-trigger" data-modal-target="layouts-modal-softlanguage">
	Toggle the softlanguage modal overlay
</button>
<div id="layouts-modal-softlanguage" class="l-modal js-modal">
	<div class="l-modal__backdrop"></div>
	<section class="l-modal__container">
		<header class="l-modal__header">
			<h5 class="l-modal__title">Changing the language of the educational information</h5>
			<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="layouts-modal-softlanguage">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</header>
		<article class="l-modal__content u-padding-bottom-none">
			<p>You are about to view this page in <strong>French</strong> but it won't modify your browsing preference.</p>
		</article>
		<div class="l-modal__footer l-grid l-grid--with-spacing">
			<button class="a-button l-grid__col u-width-100 ">
				<span class="a-button__text">Okay and don&#39;t show this message again</span>
			</button>
			<button class="a-button l-grid__col a-button--secondary a-button--outline u-width-100 ">
				<span class="a-button__text">Okay</span>
			</button>
			<a class="a-link l-grid__col " href="">
				<span class="a-link__text">Annuleren</span>
			</a>
		</div>
	</section>
</div>

Documentation

Modifiers

  • l-modal__footer--border-top

    Gives the footer a border top

States

  • is-open

    Indicate that the modal is open and active on the page. By applying this class to the root of the l-modal, we display it to the user. Toggling between this class will toggle the modal.