Modals

Javascript dependency

Modal uses remodal plugin /bower_components/remodal/dist/remodal.js
Documentation for remodal: https://github.com/VodkaBears/Remodal

Files

app/styles/modules/_modals.scss
app/scripts/modules/modals.js

Modals

Modal window can contain text or any UI controls such as forms, buttons etc. Modal windows retain focus until dismissed or a required action has been taken.

Modal component is complex component containing .modal as window wrapper and .modal_header, .modal_content and .modal_footer as inner sections of modal window. Modal window component can be created by following HTML structure in example below.

To display modal window after page load add attribute: remodal-open-on-load="remodal-open-on-load"

Example:

Code:

<article class="modal remodal" data-remodal-id="modal-example" data-remodal-options="hashTracking: false">
  <header class="modal_header">
    <div class="modal_header_headline">
      <h3 class="no-mrg text-ellipsis">Modal header</h3>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" data-remodal-action="close">
        <i class="icon icon-m">close</i>
      </button>
    </div>
  </header>
  <section class="modal_content">
    ...
  </section>
  <footer class="modal_footer">
    <div class="btn-line pull-right">
      <button class="btn" type="button" data-remodal-action="close">Cancel
      </button>
      <button class="btn btn-primary" type="button" data-remodal-action="confirm">Ok
      </button>
    </div>
  </footer>
</article>

<!-- Large modal -->
<article class="modal modal-l remodal">
  ...
</article>

Modal consent

Example:

Pravidlá používania cookies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mauris ex, tincidunt in risus ac, eleifend porta lectus. Vestibulum suscipit, ipsum eu ultricies sagittis, quam nisl feugiat ligula, in dictum purus tellus sed nisl. Nullam ac diam est.

Cookies

Curabitur vulputate magna ut purus imperdiet, quis dictum eros fringilla. Pellentesque suscipit, nunc in pulvinar mollis, quam massa scelerisque nisi, at tincidunt nibh magna et sapien. Phasellus auctor leo eget ipsum eleifend ornare. Aliquam erat volutpat. Sed feugiat laoreet placerat. Fusce maximus, est a posuere tincidunt, ex ipsum faucibus nulla, faucibus hendrerit ante sem vitae massa. Nulla vel semper risus. Nam iaculis sem ac sem tincidunt, vitae dictum enim commodo. Proin ut sapien eget nisl maximus porta ut vel ligula. Nulla facilisi. Integer non ultrices nisl. Sed id ultricies velit, sodales pharetra ex. Duis et gravida nulla. Suspendisse hendrerit elementum elementum. Sed rutrum ipsum ut sem aliquet, in accumsan nisi sagittis. Aliquam fermentum imperdiet orci sed molestie.

Donec ac nisl at tortor pharetra laoreet sit amet sit amet leo. Donec in ligula tellus. In hac habitasse platea dictumst. Cras ac tortor a ipsum euismod aliquet in quis quam. Quisque mollis eros ac felis aliquam lobortis. Nunc tortor neque, posuere ut venenatis at, vulputate a lectus. Aenean vel nulla at lacus congue ultricies. Ut hendrerit ac nisi ut tempus. Phasellus mauris nisl, aliquet vel vestibulum ut, lobortis a est. Curabitur a lacinia nibh. Morbi dignissim neque nibh, sodales sollicitudin libero fermentum ultrices. Fusce eu turpis fringilla, ullamcorper sem nec, pharetra lacus.

Vivamus ac orci neque. Mauris magna ex, semper vitae est a, condimentum tristique ligula. Vestibulum sollicitudin placerat nibh, vel fermentum lacus auctor eget. Nam suscipit dui sit amet eros iaculis, quis vestibulum ante feugiat. Fusce aliquet, urna facilisis faucibus ultrices, orci sem molestie sapien, sit amet mattis arcu mi a nulla. Curabitur nec tincidunt lorem. In hac habitasse platea dictumst. Donec at ipsum non orci posuere iaculis. Nunc at augue elit. Sed dapibus purus vel purus vestibulum consectetur. Cras aliquam pretium eros, in varius ex elementum ac. Duis semper venenatis velit, eu volutpat erat mattis in. Pellentesque rhoncus ornare odio ut convallis. Aenean interdum turpis et porttitor tempus.

Morbi eget purus feugiat tellus rutrum dignissim ac id lectus. In vulputate ornare facilisis. Cras metus urna, luctus id justo pellentesque, viverra eleifend erat. Nulla id neque eu lorem dictum tristique. Etiam vulputate ipsum nec dui tempor consequat. Morbi laoreet turpis eget egestas molestie. Nunc dapibus rhoncus eros, at pharetra nibh condimentum sed. Nulla facilisi. Sed pellentesque, nisi sed tempor dapibus, ligula lectus auctor ipsum, vel mattis sem enim ac quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean lorem eros, commodo eu nulla id, interdum rutrum velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<article class="modal modal--secondary modal--compact remodal" data-remodal-id="modal-example" data-remodal-options="hashTracking: false">
  <header class="modal_header">
    <div class="modal_header_headline">
      <h3 class="no-mrg text-bold text-ellipsis">Pravidlá používania cookies</h3>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" data-remodal-action="close">
        <i class="icon icon-m">close</i>
      </button>
    </div>
  </header>
  <section class="modal_content">
    ...
  </section>
  <footer class="modal_footer">
    <div class="btn-line pull-right">
      <button class="btn btn-ghost-primary btn-small" type="button" data-remodal-action="close">Nesúhlasím
      </button>
      <button class="btn btn-primary btn-small" type="button" data-remodal-action="confirm">Súhlasím
      </button>
    </div>
  </footer>
</article>

Delete user modal

Example:

Code:

<!-- Modal 1 -->
<article class="modal modal-l remodal modal--rating" data-remodal-id="delete-user-modal-example" data-remodal-options="hashTracking: false" tabindex="-1">
  <header class="modal_header">
    <div class="modal_header_headline">
      <div class="text-center mrg-20-bottom text-medium">Vymazať profil</div>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" data-remodal-action="close"><i class="icon icon-m">close</i>
      </button>
    </div>
    <div class="modal_user-picture" style="background-image:url(/images/sample-user.jpg);"></div>
  </header>
  <section class="modal_content text-center no-pad-bottom">
    <p class="no-mrg-top text-center">Peter Skrovan</p>
    <h2 class="h2 text-center mrg-20-bottom text-bold">Naozaj si želáte vymazať profil?</h2>
    <div class="checkbox mrg-20-bottom mrg-10-top">
      <input class="checkbox-input" id="ip-1" type="checkbox">
      <label class="checkbox-custom" for="ip-1"></label>
      <label class="checkbox-label" for="ip-1">Želám si vymazat všetky údaje ktoré o mne evidujete.</label>
    </div>
  </section>
  <footer class="modal_footer modal_footer--no-border">
    <div class="btn-line text-center mrg-40-bottom">
      <button class="btn btn-ghost-blue text-uppercase" type="button" data-remodal-action="close">Späť
      </button>
      <button class="btn btn-blue text-uppercase" type="button" data-remodal-action="confirm" data-remodal-target="delete-user-2-modal-example">Vymazať
      </button>
    </div>
  </footer>
</article>


<!-- Modal 2 -->
<article class="modal modal-l remodal modal--rating" data-remodal-id="delete-user-2-modal-example" data-remodal-options="hashTracking: false" tabindex="-1">
  <header class="modal_header">
    <div class="modal_header_headline">
      <div class="text-center mrg-20-bottom text-medium">&nbsp;</div>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" data-remodal-action="close"><i class="icon icon-m">close</i>
      </button>
    </div>
    <div class="modal_user-picture" style="background-image:url(/images/sample-user.jpg);"></div>
  </header>
  <section class="modal_content text-center">
    <p class="no-mrg-top text-center">Peter Skrovan</p>
    <h2 class="text-bold mrg-50-top mrg-80-bottom"><i class="icon icon-m icon--circle text-color-blue-green mrg-20-right">check</i>Váš profil bol vymazaný!
    </h2>
  </section>
</article>

Rating modal

Example:

Code:

<article class="modal modal-l modal--rating">
  <header class="modal_header">
    <div class="modal_header_headline">
      <h1 class="h3 no-mrg text-center text-bold">AromaSoul Elements Massage</h1>
      <div class="text-center text-small">Completed on 15.8.2017</div>
      <div class="modal_user-picture" style="background-image:url(/images/sample-user.jpg);"></div>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" icononly="iconOnly" data-remodal-action="close"><i class="icon icon-m">close</i>
      </button>
    </div>
  </header>
  <section class="modal_content">
    <p class="no-mrg-top text-center">Peter Skrovan</p>
    <h2 class="h1 text-center mrg-20-bottom text-bold">How satisfied were you with your service?</h2>
    <div class="row">
      <div class="col-l-12 text-center">
        <div class="rating-picker rating-picker--l mrg-30-bottom">
          <div class="rating-picker__indicator">4 <span class="text-color-grey-600">/ 5</span></div><a class="rating-picker__item" href="javascript:;">
            <div class="rating-picker__item-image rating-picker__item-image--1"></div>
            <div class="rating-picker__item-description">Trash</div></a><a class="rating-picker__item" href="javascript:;">
            <div class="rating-picker__item-image rating-picker__item-image--2"></div>
            <div class="rating-picker__item-description">Bad</div></a><a class="rating-picker__item" href="javascript:;">
            <div class="rating-picker__item-image rating-picker__item-image--3"></div>
            <div class="rating-picker__item-description">Okay</div></a><a class="rating-picker__item" href="javascript:;">
            <div class="rating-picker__item-image rating-picker__item-image--4"></div>
            <div class="rating-picker__item-description">Satisfied</div></a><a class="rating-picker__item" href="javascript:;">
            <div class="rating-picker__item-image rating-picker__item-image--5"></div>
            <div class="rating-picker__item-description">Excellent</div></a>
        </div>
      </div>
    </div>
    <div class="row form-row">
      <div class="form-label col">
        <label class="text-color-grey-600 mrg-5-bottom" for="rating-modal-comment">Comment</label>
      </div>
      <div class="form-controls col">
        <input class="input input--bordered-grey" id="rating-modal-comment" placeholder="Leave a comment about your session with the customer" type="text">
      </div>
    </div>
  </section>
  <footer class="modal_footer modal_footer--no-border">
    <div class="btn-line text-center mrg-20-bottom">
      <button class="btn btn-ghost-blue" type="button" data-remodal-action="close">Cancel
      </button>
      <button class="btn btn-blue" type="button" data-remodal-action="confirm">Ok
      </button>
    </div>
  </footer>
</article>

Modals

Modal consent

Cookies

Delete user modal

Naozaj si želáte vymazať profil?

checkVáš profil bol vymazaný!

Rating modal

How satisfied were you with your service?

Váš profil bol vymazaný!