Modals / simple Lightbox

Thanks to Modals you can display a content in simple lightbox effect over particular page content. Modals may contain common text, headlines, images, buttons, iframes and a content of modal can be divided into the columns.

How to use the Modals:

Define a button to open a modal using the “modal-button” class and the “data-modal” parameter (for example, data-modal=”modal-1″). Define the content of the modal window using the “modal” class and the “id” parameter (for example, id=”modal-1″). This means that the button with the parameter
data-modal=”modal-1″ opens the modal with parameter id=”modal-1″.

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-1">open modal</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat. </p>

<!-- Modal content--> 
<div class="modal" id="modal-1">
<h3>Responsive modal window</h3>
<p>
Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum. Nonummy maecenas ultricies eros sociis hendrerit dictum unde deleniti excepteur eiusmod doloremque.
</p>
<a class="modal-close-button">Close modal</a>			 
</div>

</div>
</div>

Practical example of Modal:

Open and close modal with buttons:

<div class="size-960">
<div class="line">
<p class="margin-bottom">Lorem ipsum dolor nonummy turpis tincidunt malesuada molestie praesent rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat. </p>
<a class="modal-button button submit-btn" data-modal="modal-2">Open modal</a>

<!-- Modal content--> 
<div class="modal" id="modal-2">
<h3>Responsive modal window</h3>
<p class="margin-bottom">
Con nonummy sem integer interdum volutpat dis eget eligendi aliquip dolorum magnam. Lorem ipsum dolor si amet taciti sunt torquent ipsam proin montes quia netus quo minima sint. At aenean etiam suspendisse ultricies auctor per nihil nisi. Ullam fermentum urna varius et saepe labore dignissim consectetuer fusce elementum. Nonummy maecenas ultricies eros sociis hendrerit dictum unde deleniti excepteur eiusmod doloremque.
</p>
<a class="modal-close-button button cancel-btn">Close modal</a>			 
</div>

</div>
</div>

Practical example of Modal with buttons:

Open modal with images (simple image lightbox):

<div class="size-960">
<div class="line">
<a class="modal-button" data-modal="modal-3"><img src="/wp-content/themes/responsee/img/gallery-1.svg" alt=""></a>

<!-- Modal content--> 
<div class="modal" id="modal-3">
<img src="/wp-content/themes/responsee/img/header-1.svg" alt="">		 
</div>

</div>
</div>

Practical example of Modal with image:

Modal with Google map (iframe):

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-4">open Google map modal</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.</p>

<!-- Modal content--> 
<div class="modal" id="modal-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21301.699444392307!2d17.047469873176862!3d48.16110781031926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ssk!2ssk!4v1600023067427!5m2!1ssk!2ssk" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>		 
</div>

</div>
</div>

Practical example of Modal with Google map (ifarme):

Modal with the contents arranged in columns:

<div class="size-960">
<div class="line">
<p>Lorem ipsum dolor <a class="modal-button" data-modal="modal-5">open modal with columns</a> rhoncus ad illum nemo accusantium doloremque cupidatat. Wisi nullam sed pede dis potenti facilisi penatibus reprehenderit diamlorem impedit aspernatur accusantium cupidatat.</p>

<!-- Modal content--> 
<div class="modal" id="modal-5">
<div class="line">
<div class="margin">
<div class="s-12 m-6 l-4 margin-bottom">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="s-12 m-6 l-4 margin-bottom">
<h2>Company</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="s-12 m-6 l-4 margin-bottom">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>	 
</div>

</div>
</div>

Practical example of Modal with the contents arranged in columns: