Discover the definition and functionality of a JS modal with this comprehensive guide. Learn how to use JavaScript to create modal windows, also known as pop-ups or dialog boxes, to enhance user experience on your website. Explore different types of modals and learn best practices for implementing them into your web design.
Modals offer an amazing advantage throughout your app since you can display data on demand that you want the user to see or change in seconds instead of letting the redirector send the user to an actual form to edit the data directly and thus submitting to an actual script. In case of a fully implemented web app, modals used side by side with AJAX or Asynchronous JavaScript and XML. AJAX is the main technique that the modal will be populated and save its contents once all necessary fields are filled. In its plain form a modal is a fancy popup.
A JS modal is a popup window that will be displayed momentarily in order to show data of some kind that the user may interact with. Since it’s made using JavaScript, hence the name JS modal. A modal is an exceptional medium to show carousels or forms that will be loaded and saved using AJAX.
Feel free to use my own version of a vanilla modal. You may change or edit the modal to your specifications should you deem it necessary. CSS, HTML & JavaScript are all provided in distinctive snippets.
<script>/* JavaScript */
var images = ['images/1.png', 'images/2.png', 'images/3.png'], index = 0, thumbs = '';
// sets slide to a specific index
function set_image(idx){
index = idx;
document.getElementById('inner-image').style.backgroundImage = 'url(' + images[index] +')';
}
window.addEventListener('load', function() {
// set up first image on modal
document.getElementById('inner-image').style.backgroundImage = 'url('+images[index]+')';
document.getElementById('inner-image').style.backgroundPosition = 'center center';
document.getElementById('inner-image').style.backgroundSize = 'cover';
document.getElementById('inner-image').style.height = '450px';
// make show/hide actions for modal
document.getElementById('k-modal-toggle').addEventListener('click', function(){
if (window.getComputedStyle(document.getElementById('k-modal'), null).display == 'none'){
document.getElementById('k-modal').style.display = 'block';
document.getElementById('k-modal').style.animation = 'fade_in_show 1s';
} else if (window.getComputedStyle(document.getElementById('k-modal'), null).display == 'block'){
document.getElementById('k-modal').style.display = 'none';
}
});
// go to previous slide
document.getElementById('km-left').addEventListener('click', function(){
if (index <= 0) index = images.length - 1; else index--;
document.getElementById('inner-image').style.backgroundImage = 'url('+images[index]+')';
})
// go to next slide
document.getElementById('km-right').addEventListener('click', function(){
if (index >= images.length - 1) index = 0; else index++;
document.getElementById('inner-image').style.backgroundImage = 'url('+images[index]+')';
})
// make thumbs
images.forEach(function(img, idx){
thumbs += '<img src="'+img+'" style="width: 64px;height: 64px;"';
thumbs += ' onclick="set_image('+idx+')"/>';
});
document.getElementById('inner-thumbs').innerHTML = thumbs; // set thumbs here
});
</script>
<!-- HTML -->
<button id="k-modal-toggle">Toggle</button>
<div class="k-modal" id="k-modal">
<div class="k-modal-content">
<div class="k-modal-image" id="inner-image"></div>
<div class="k-modal-thumbs" id="inner-thumbs"></div>
<div class="k-modal-control">
<span id="km-left" class="km-control">←</span>
<span id="km-right" class="km-control">→</span>
</div>
</div>
</div>
<style> /* CSS */
.k-modal {
max-width: 40%;
width: 100%;
position: absolute;
top: 10%;
left:0;
right:0;
display: none;
margin-left: auto;
margin-right: auto;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 2px 5px #ddd;
padding: 2em;
transition: all 400ms ease-in-out;
}
.k-modal-control {
text-align: center;
}
.km-control {
background: #aaa;
display: inline-block;
padding: 1em;
margin-top: .5em;
color: #fff;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.km-control:hover {
background: #eee;
color: #aaa;
}
@keyframes fade_in_show {
0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
</style>
