A modal (also called a modal window or lightbox) is a web page element that displays in front of and
deactivates all other page content. To return to the main content, the user must engage with the modal
by completing an action or by closing it.
Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.
Warning!
New: Follow-up Emails
Automatically send your invitees a follow-up email after you meet.
Payment Successful !
Your transaction ID is TRX0854632ID
Newsletter
<div id="basic-modal" class="modal">
<div class="modal-header">
<h2 class="modal-title">Warning!</h2>
<span id="close-modal" onclick="closeModal()"><i class="fa-solid
fa-xmark"></i></span>
</div>
<p class="modal-message">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis
ratione
repellat quas est mollitia in adipisci aperiam alias ad ex non qui ea officia cumque harum,
soluta
reprehenderit, veritatis voluptates!</p>
<div class="modal-footer">
<button class="cancel" onclick="closeModal()">Cancel</button>
<button class="accept">Accept</button>
</div>
</div>
<div id="informative-modal" class="modal">
<div class="modal-header">
<span id="close-modal" onclick="closeModal()"><i class="fa-solid
fa-xmark"></i></span>
</div>
<p class="modal-message"><img src="images/mail.png" alt="" class="modal-image"></p>
<div class="modal-text">
<h2 class="modal-Text">New: Follow-up Emails</h2>
<h4 class="modal-Text">Automatically send your invitees a follow-up email after you meet.
</h4>
</div>
<div class="modal-footer">
<button class="accept modal-cng">Learn More</button>
<button class="cancel" onclick="closeModal()">Got It</button>
</div>
</div>
<div id="success-modal" class="modal">
<div class="modal-header">
<span id="close-modal" onclick="closeModal()"><i class="fa-solid
fa-xmark"></i></span>
</div>
<p class="modal-message"><img src="images/success.gif" alt=""
class="modal-image"></p>
<div class="modal-text">
<h2 class="modal-Text">Payment Successful !</h2>
<h4 class="modal-Text">Your transaction ID is TRX0854632ID</h4>
</div>
<div class="modal-footer">
<button class="cancel" onclick="closeModal()">Close</button>
</div>
</div>
<div id="subscribe-modal" class="modal">
<div class="modal-content" style="background: url('images/back.png') center center
!important;">
<div class="modal-header">
<span id="close-modal" onclick="closeModal()"><i class="fa-solid
fa-xmark"></i></span>
</div>
<div class="modal-text">
<h2 class="modal-Text">Newsletter</h2>
<p class="modal-message"><img src="images/mail2.png" alt=""
class="modal-image"></p>
</div>
</div>
<div class="modal-footer">
<input type="email" class="subscriber" placeholder="E-mail address" required>
<button class="accept" onclick="closeModal()">Subscribe</button>
</div>
</div>
<div id="advertise-modal" class="modal">
<div class="modal-content" style="background: url('images/summer1.jpg') center center">
<span class="advertise-title">SUMMER</span>
<span class="advertise-subtitle">Sale</span>
<div class="advertise-discount">
<p class="discount">40%<sup>OFF</sup></p>
</div>
</div>
<div class="modal-footer"
style="background: url('images/summer2.png') center center;background-size:100% 100%;">
<button class="accept" onclick="closeModal()">SHOP NOW</button>
<span id="close-modal" onclick="closeModal()"><i class="fa-solid
fa-xmark"></i></span>
</div>
</div>