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

Profile Picture

We've auto-chosen a profile image for you.

We've grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Nope

Yep, that's me

Basic Modal

Full Screen

Size - Small

Size - Large