TheBestTutorials.css Modal
TheBestTutorials.css Modal
A modal is a dialog box/popup window that is displayed on top of the current page:
How To Create A Modal
Example
<button onclick="document.getElementById('id01').style.display='block'"
class="subhodaya-btn">Open Modal</button>
<!-- The Modal -->
<div id="id01" class="subhodaya-modal">
<div class="subhodaya-modal-content">
<div class="subhodaya-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="subhodaya-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
The "TheBestTutorials-CSS-modal" Class
A modal can be any HTML container (like a <div>) with class="subhodaya-modal".
The "TheBestTutorials-CSS-modal-content" Class
All modal content should be placed in an HTML container with class="TheBestTutorials-CSS-modal-content".
Modal content can be any HTML element (headings, paragraphs, images, etc.)
Open a Modal
Use any HTML element to open the modal. This is often a button or a link.
Add the onclick attribute and point to the id of the modal (id01 in our example), using the document.getElementById() method and specify a unique ID that matches the "trigger" button (id01).
Closing a Modal
To close a modal, add the TheBestTutorials-closebtn class to an element together with an onclick attribute that points to the id of the modal (id01). You can also close it by clicking outside of the modal (see example below).
× is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".
Modal Header and Footer
Inside the <div> with class="TheBestTutorials-modal-content", use TheBestTutorials-container classes to create different sections in the modal:
Example
<div class="subhodaya-modal-content">
<header class="subhodaya-container subhodaya-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="subhodaya-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div class="subhodaya-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="subhodaya-container subhodaya-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
Modal As a Card
To display the modal as a card, add the TheBestTutorials-card-* class to the TheBestTutorials-CSS-modal-content container:
Animated Modals
Use any of the TheBestTutorials-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:
Example
<div class="TheBestTutorials-modal-content TheBestTutorials-animate-top">
<div class="TheBestTutorials-modal-content TheBestTutorials-animate-bottom">
<div class="TheBestTutorials-modal-content TheBestTutorials-animate-left">
<div class="TheBestTutorials-modal-content TheBestTutorials-animate-right">
<div class="TheBestTutorials-modal-content TheBestTutorials-animate-opacity">
You can also fade in the modal's background color (TheBestTutorials-CSS-modal):
Modal Image
Click on the image to display it in full size:
Example
<div id="modal01" class="subhodaya-modal subhodaya-animate-zoom" onclick="this.style.display='none'">
<img class="subhodaya-modal-content" src="img_fjords.jpg">
</div>
Modal Image Gallery
Click on an image to display it in full size:
Example
<div class="subhodaya-container subhodaya-third">
<img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="subhodaya-container subhodaya-third">
<img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="subhodaya-container subhodaya-third">
<img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="subhodaya-modal" onclick="this.style.display='none'">
<img class="subhodaya-modal-content" id="img01" style="width:100%">
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Modal Login Form
This example creates a modal for login:
Modal Tab
This example creates a modal with tabbed content:
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}