<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<button data-toggle="o-modal" class="openModalBtn btn btn--primary" data-target="o-modal1">Open Modal Large</button>
<button data-toggle="o-modal" class="openModalBtn btn btn--primary" data-target="o-modal2">Open Modal Medium</button>
<button data-toggle="o-modal" class="openModalBtn btn btn--primary" data-target="o-modal3">Open Modal </button>
<!-- SECTION modal large -->
<div class="o-modal" id="o-modal1">
<div class="o-modal__wrapper o-modal__wrapper--lg">
<div class="o-modal__content">
<div class="o-modal__header">
<h3 class="o-modal__title font-size--h3">
Modal Large
</h3>
<div class="o-modal__close" data-target="o-modal1">
<img src="assets/min-images/icons/close.svg" class="o-modal__close-icon" alt="close image">
</div>
</div>
<div class="o-modal__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quas officia laboriosam nesciunt, labore voluptas sunt quos iste ratione perspiciatis deserunt magni saepe aliquid, necessitatibus odio cum non, in nulla!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint doloribus tempore esse eveniet fugit porro fuga sed necessitatibus aperiam expedita perferendis corrupti ex nisi, eaque doloremque asperiores repudiandae consequuntur?</p>
</div>
<div class="o-modal__footer">
<a href="#" class="btn btn-large btn--line">Deny</a>
<a href="#" class="btn btn-large btn--primary">Confirm</a>
</div>
</div>
</div>
</div>
<!-- !SECTION -->
<!-- SECTION modal medium -->
<div class="o-modal" id="o-modal2">
<div class="o-modal__wrapper o-modal__wrapper--md">
<div class="o-modal__content">
<div class="o-modal__header">
<h3 class="o-modal__title font-size--h3">
Modal Medium
</h3>
<div class="o-modal__close" data-target="o-modal2">
<img src="assets/min-images/icons/close.svg" class="o-modal__close-icon" alt="close image">
</div>
</div>
<div class="o-modal__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quas officia laboriosam nesciunt, labore voluptas sunt quos iste ratione perspiciatis deserunt magni saepe aliquid, necessitatibus odio cum non, in nulla!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint doloribus tempore esse eveniet fugit porro fuga sed necessitatibus aperiam expedita perferendis corrupti ex nisi, eaque doloremque asperiores repudiandae consequuntur?</p>
</div>
<div class="o-modal__footer">
<a href="#" class="btn btn-large btn--line">Deny</a>
<a href="#" class="btn btn-large btn--primary">Confirm</a>
</div>
</div>
</div>
</div>
<!-- !SECTION -->
<!-- SECTION modal small -->
<div class="o-modal" id="o-modal3">
<div class="o-modal__wrapper o-modal__wrapper--small">
<div class="o-modal__content">
<div class="o-modal__header">
<h3 class="o-modal__title font-size--h3">
Modal Small
</h3>
<div class="o-modal__close" data-target="o-modal3">
<img src="assets/min-images/icons/close.svg" class="o-modal__close-icon" alt="close image">
</div>
</div>
<div class="o-modal__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quas officia laboriosam nesciunt, labore voluptas sunt quos iste ratione perspiciatis deserunt magni saepe aliquid, necessitatibus odio cum non, in nulla!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint doloribus tempore esse eveniet fugit porro fuga sed necessitatibus aperiam expedita perferendis corrupti ex nisi, eaque doloremque asperiores repudiandae consequuntur?</p>
</div>
<div class="o-modal__footer">
<a href="#" class="btn btn-large btn--line">Deny</a>
<a href="#" class="btn btn-large btn--primary">Confirm</a>
</div>
</div>
</div>
</div>
<!-- !SECTION -->
</div>
</div>
.o-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background: #00000040;
}
.o-modal__wrapper {
position: relative;
max-width: 600px;
margin: 28px 20px;
background-color: #FFF;
border-radius: 5px;
}
.o-modal__wrapper--lg {
max-width: 1000px;
}
.o-modal__wrapper--md {
max-width: 700px;
}
.o-modal__wrapper--small {
max-width: 400px;
}
.o-modal__header {
display: flex;
justify-content: space-between;
gap: 5px;
padding: 16px 24px 16px 24px;
border-bottom: 1px solid #E9ECEF;
}
.o-modal__title {
color: colors.$font-color-one;
font-size: 24px;
}
.o-modal__close {
width: 24px;
height: 24px;
cursor: pointer;
}
.o-modal__close-icon {
max-width: 100%;
}
.o-modal__body {
padding: 16px 24px 16px 24px;
border-bottom: 1px solid #E9ECEF;
}
.o-modal__footer {
padding: 16px 24px 16px 24px;
}
document.addEventListener("DOMContentLoaded", function () {
// Get the modals and the buttons
//var modals = document.querySelectorAll(".modal");
var openBtns = document.querySelectorAll(".openModalBtn");
var closeBtns = document.querySelectorAll(".o-modal__close");
// Function to open the modal
function openModal(targetModalId) {
document.body.classList.add("body-fixed");
var targetModal = document.getElementById(targetModalId);
targetModal.style.display = "block";
}
// Function to close the modal
function closeModal(targetModalId) {
document.body.classList.remove("body-fixed");
var targetModal = document.getElementById(targetModalId);
targetModal.style.display = "none";
}
// Event listeners for opening the modals
openBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var targetModalId = btn.getAttribute("data-target");
openModal(targetModalId);
});
});
// Event listeners for closing the modals
closeBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var targetModalId = btn.getAttribute("data-target");
closeModal(targetModalId);
});
});
});
