Basic Code Structure for Modals:

<div class="modalitem" data-id="12">Launch Modal</div>

<div id="modal-12" class="r-modal">
      <div class="header">Header Title</div>
      <div class="content">Content to show on the modal</div>
      <div class="actions">Footer Content</div>
</div>

You need to make sure data-id=[id] and modal-[id] is the same for a modal. If you create multiple modal add different ID for each modal.

 

Standard Modal
Launch Modal

 

Basic Modal
Basic Modal

 

Full Screen
Fullscreen Modal

 

Size - Small
Small Size Modal

 

Size - Large
Large Size Modal

The Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sodales quam. Aenean turpis neque, posuere at libero eget, sodales lacinia arcu. Aenean in cursus nisi, id condimentum odio. Nam gravida tellus non gravida congue. Proin sollicitudin quis risus id pulvinar. Fusce ac nisl sit amet velit luctus blandit. Maecenas venenatis ligula turpis, volutpat congue felis sagittis a. Nunc non rhoncus sapien.

  • 789 Lorem Street, NY, USA
  • 0123 456 789
  • support@domain.com
keyboard_arrow_up