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

About Us

Pellentesque libero est, luctus sit amet urna eu, vestibulum egestas nunc. Mauris eu eros ipsum. Vivamus rhoncus tempor nunc sed ornare. Duis tellus tellus, semper vitae elit lacinia, ullamcorper pharetra purus. Proin mi lacus, pharetra feugiat nisi at, porta porta diam. Ut aliquam quam et cursus tempor. Mauris eu eros ipsum. Vivamus rhoncus tempor nunc sed ornare. Phasellus non dolor at justo lacinia elementum sagittis id magna.

From Blog

Revisit an old idea augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
Don't eat budget calculator in bed augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
Never lose your travel again augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
Do the thing nobody has done augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
Tidy your workspace augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
How can you simplify? augustus 13, 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis mattis metus, sit amet finibus metus accumsan nec.
keyboard_arrow_up