<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/losbeekos/pen/cmqaL?depth=everything&limit=all&order=popularity&page=4&q=modal&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">/*
All credits for the modal effects go to Codrops:
https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects
*/
/*========== Settings ==========*/
/*========== REM ==========*/
/*==============================
= Modals =
==============================*/
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal.modal-show {
visibility: visible;
}
.lt-ie9 .modal {
top: 0;
margin-left: -315px;
}
.modal-content {
background: #ffffff;
position: relative;
margin: 0 auto;
padding: 40px;
border-radius: 3px;
}
.modal-overlay {
background: #000000;
position: fixed;
visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition-property: visibility, opacity;
-o-transition-property: visibility, opacity;
-webkit-transition-property: visibility, opacity;
transition-property: visibility, opacity;
-moz-transition-delay: 0.5s, 0.1s;
-o-transition-delay: 0.5s, 0.1s;
-webkit-transition-delay: 0.5s, 0.1s;
transition-delay: 0.5s, 0.1s;
-moz-transition-duration: 0, 0.5s;
-o-transition-duration: 0, 0.5s;
-webkit-transition-duration: 0, 0.5s;
transition-duration: 0, 0.5s;
}
.modal-show .modal-overlay {
visibility: visible;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
/*==========================================
= Slip (top, bottom) =
==========================================*/
@-webkit-keyframes slipTop {
50% {
-webkit-transform: rotateX(10deg);
-webkit-animation-timing-function: ease-out;
}
}
@-moz-keyframes slipTop {
50% {
-moz-transform: rotateX(10deg);
-moz-animation-timing-function: ease-out;
}
}
@keyframes slipTop {
50% {
transform: rotateX(10deg);
animation-timing-function: ease-out;
}
}
@-webkit-keyframes slipBottom {
50% {
-webkit-transform: rotateX(-10deg);
-webkit-animation-timing-function: ease-out;
}
}
@-moz-keyframes slipBottom {
50% {
-moz-transform: rotateX(-10deg);
-moz-animation-timing-function: ease-out;
}
}
@keyframes slipBottom {
50% {
transform: rotateX(-10deg);
animation-timing-function: ease-out;
}
}
html[data-modal-effect|=slip],
[data-modal-effect|=slip] body,
[data-modal-effect|=slip] .container {
height: 100%;
overflow: hidden;
}
[data-modal-effect|=slip] body {
-moz-perspective: 600;
-webkit-perspective: 600;
perspective: 600;
}
[data-modal-effect|=slip] .container,
[data-modal-effect|=slip] .modal-overlay {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
[data-modal-effect=slip-top] .container,
[data-modal-effect=slip-top] .modal-overlay {
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: slipTop 0.5s forwards ease-in;
-moz-animation: slipTop 0.5s forwards ease-in;
animation: slipTop 0.5s forwards ease-in;
}
[data-modal-effect=slip-bottom] .container,
[data-modal-effect=slip-bottom] .modal-overlay {
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: slipBottom 0.5s forwards ease-in;
-moz-animation: slipBottom 0.5s forwards ease-in;
animation: slipBottom 0.5s forwards ease-in;
}
.modal[data-modal-effect|=slip] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
transition: all 0.5s 0.1s;
}
.modal[data-modal-effect|=slip].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.modal[data-modal-effect=slip-top] .modal-content {
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.modal[data-modal-effect=slip-top].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
.modal[data-modal-effect=slip-bottom] .modal-content {
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.modal[data-modal-effect=slip-bottom].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
/*========================================================
= Slide (top, right, bottom, left) =
========================================================*/
.modal[data-modal-effect|=slide] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.5s 0;
-o-transition: all 0.5s 0;
-webkit-transition: all 0.5s 0;
transition: all 0.5s 0;
}
.modal[data-modal-effect|=slide].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
transition: all 0.5s 0.1s;
}
.modal[data-modal-effect=slide-top] .modal-content {
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.modal[data-modal-effect=slide-top].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
.modal[data-modal-effect=slide-right] .modal-content {
-moz-transform: translateX(300%);
-ms-transform: translateX(300%);
-webkit-transform: translateX(300%);
transform: translateX(300%);
}
.modal[data-modal-effect=slide-right].modal-show .modal-content {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
.modal[data-modal-effect=slide-bottom] .modal-content {
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.modal[data-modal-effect=slide-bottom].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
.modal[data-modal-effect=slide-left] .modal-content {
-moz-transform: translateX(-300%);
-ms-transform: translateX(-300%);
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.modal[data-modal-effect=slide-left].modal-show .modal-content {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
/*===================================================
= Flip (horizontal, vertical) =
===================================================*/
.modal[data-modal-effect|=flip] {
-moz-perspective: 1300;
-webkit-perspective: 1300;
perspective: 1300;
}
.modal[data-modal-effect|=flip] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.modal[data-modal-effect|=flip].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.modal[data-modal-effect=flip-horizontal] .modal-content {
-moz-transform: rotateY(-70deg);
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg);
}
.modal[data-modal-effect=flip-horizontal].modal-show .modal-content {
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.modal[data-modal-effect=flip-vertical] .modal-content {
-moz-transform: rotateX(-70deg);
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
}
.modal[data-modal-effect=flip-vertical].modal-show .modal-content {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/*=======================================
= Fade in & scale =
=======================================*/
.modal[data-modal-effect=fadescale] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: scale(0.7, 0.7);
-ms-transform: scale(0.7, 0.7);
-webkit-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.modal[data-modal-effect=fadescale].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/*=====================================
= Super scale =
=====================================*/
.modal[data-modal-effect=superscale] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: scale(2, 2);
-ms-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.modal[data-modal-effect=superscale].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/*========== Buttons ==========*/
.btn {
display: inline-block;
color: #333333;
border-radius: 3px;
background-color: #e8e8e8;
border: 0;
outline: 0;
cursor: pointer;
text-align: center;
border: 1px solid #cfcfcf;
font-size: 1em;
text-decoration: none;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-moz-appearance: none;
-webkit-appearance: none;
user-select: none;
}
.btn:hover {
color: #333333;
background-color: #dbdbdb;
}
.btn:focus {
outline: none;
box-shadow: 0 0 10px #c2c2c2;
-moz-transition-duration: 0.05s;
-o-transition-duration: 0.05s;
-webkit-transition-duration: 0.05s;
transition-duration: 0.05s;
}
.btn:disabled {
background-color: #e8e8e8;
cursor: not-allowed;
color: #cccccc;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
.btn:disabled:focus {
box-shadow: none;
}
.btn-small {
padding: 8px 30px;
padding: 0.5rem 1.875rem;
}
.btn-medium {
padding: 12px 35px;
padding: 0.75rem 2.1875rem;
}
.btn-divider {
cursor: default;
}
.button-group {
margin: 0 0 40px 0;
margin: 0 0 2.5rem 0;
padding: 0;
}
.button-group > li {
list-style-type: none;
margin: 0 0 0 -1px;
float: left;
}
.button-group > li .btn {
border-radius: 0;
}
.button-group > li:first-child {
margin: 0;
}
.button-group > li:first-child .btn {
border-radius: 3px 0 0 3px;
}
.button-group > li:last-child .btn {
border-radius: 0 3px 3px 0;
}
body {
padding: 50px;
padding: 3.125rem;
}
</style></head><body>
<div class="container">
<h2 class="h3">Slip effects</h2>
<ul class="button-group">
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-1">slip-top</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-2">slip-bottom</a></li>
</ul>
<br />
<h2 class="h3">Slide effects</h2>
<ul class="button-group">
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-3">slide-top</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-4">slide-right</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-5">slide-bottom</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-6">slide-left</a></li>
</ul>
<br />
<h2 class="h3">Flip effects</h2>
<ul class="button-group">
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-7">flip-horizontal</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-8">flip-vertical</a></li>
</ul>
<br />
<h2 class="h3">Scale effects</h2>
<ul class="button-group">
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-9">fadescale</a></li>
<li><a class="btn btn-small modal-trigger" data-modal-id="modal-10">superscaled</a></li>
</ul>
</div>
<div id="modal-1" class="modal" data-modal-effect="slip-top">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-2" class="modal" data-modal-effect="slip-bottom">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-3" class="modal" data-modal-effect="slide-top">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-4" class="modal" data-modal-effect="slide-right">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-5" class="modal" data-modal-effect="slide-bottom">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-6" class="modal" data-modal-effect="slide-left">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-7" class="modal" data-modal-effect="flip-horizontal">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-8" class="modal" data-modal-effect="flip-vertical">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-9" class="modal" data-modal-effect="fadescale">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<div id="modal-10" class="modal" data-modal-effect="superscale">
<div class="modal-content">
<h2>Consectetur adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var modules = {
$window: $(window),
$html: $('html'),
$body: $('body'),
$container: $('.container'),
init: function () {
$(function () {
modules.modals.init();
});
}
,modals: {
trigger: $('.modal-trigger'),
modal: $('.modal'),
scrollTopPosition: null,
init: function () {
var self = this;
if (self.trigger.length > 0 && self.modal.length > 0) {
modules.$body.append('<div class="modal-overlay"></div>');
self.triggers();
}
},
triggers: function () {
var self = this;
self.trigger.on('click', function (e) {
e.preventDefault();
var $trigger = $(this);
self.openModal($trigger, $trigger.data('modalId'));
});
$('.modal-overlay').on('click', function (e) {
e.preventDefault();
self.closeModal();
});
modules.$body.on('keydown', function(e){
if (e.keyCode === 27) {
self.closeModal();
}
});
$('.modal-close').on('click', function(e) {
e.preventDefault();
self.closeModal();
});
},
openModal: function (_trigger, _modalId) {
var self = this,
scrollTopPosition = modules.$window.scrollTop(),
$targetModal = $('#' + _modalId);
self.scrollTopPosition = scrollTopPosition;
modules.$html
.addClass('modal-show')
.attr('data-modal-effect', $targetModal.data('modal-effect'));
$targetModal.addClass('modal-show');
modules.$container.scrollTop(scrollTopPosition);
},
closeModal: function () {
var self = this;
$('.modal-show').removeClass('modal-show');
modules.$html
.removeClass('modal-show')
.removeAttr('data-modal-effect');
modules.$window.scrollTop(self.scrollTopPosition);
}
}
}
modules.init();
//# sourceURL=pen.js
</script>
</body></html>
