The modal component is a component that can be used to display
information to the user. It can be used to display information
that is not important to the user, but is important to the
application.
Usages
To achieve the above Normal Modal, you need to follow the
following code:
HTML Code:
< -- For Modal Button -->
<button onclick="showModal()" class="btn">Click to Open Modal</button>
< -- For Main Modal Component -->
<div class="fancy-modal">
<div class="card-dismiss">
<div class="card_header">
<i onclick="hideModal()" class="fa fa-close"></i>
</div>
<div class="card-data">
<h1>This is Modal</h1>
</div>
</div>
</div>
Javascript Code:
In order to acheive this Modal, you need to Apply this function in
your script file. eg. in your script.js file.
// Declare Variable
const modal = document.querySelector(".fancy-modal");
//Function to Show Modal
function showModal() {
modal.style.display = "block";
}
//Function to Hide Modal
function hideModal() {
modal.style.display = "none";
}