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

Get Support

Lacinia congue diam suspendisse pretium turpis sed velit.

  • 789 Lorem Street, NY, USA
  • 0123 456 789
  • contact@domain.tld

Sign up for Newsletter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in mollis lectus, quis gravida velit. Pellentesque pretium lectus et elit lobortis imperdiet.

Login Form

Register to save more

Register an account today and get great deals, offers and customised products only for you.

  • Secure registration form
  • Your data on your hand, you can update anytime
  • Save your favourite products and access anytime
  • Order products easily.