Modals / Popups

Documentation for modal windows and popups.

Files

app/styles/modules/_modals.scss

Modals

Modal window is in-app window, that have fullscreen overlay and its usually shown in the middle of screen. Modal itself is wrapped in .modal-overlay container.
Modal component consist of two parts .modal_header and .modal_content, which are inside .modal. To create proper modal component follow code shown in example below.

Note

You can disable scrolling of modal content with .modal_content-no-scroll modifier. It can by desirable behavior for contents in role of footer of modal window.

Warning

Javascript functionality is there only for presentation purpose.

Example:

Click on button to show modal.

Show modal

Code:

<div class="modal-overlay">
  <article class="modal">
    <header class="modal_header">
      <a class="btn btn-flat modal_close">
        <i class="icon icon-m">close</i>
      </a>
      <h2 class="text-color-theme text-upper">Prepojenie</h2>
    </header>
    <section class="modal_content">
      ...
    </section>
    <section class="modal_content modal_content-no-scroll">
      ...
    </section>
  </article>
</div>

Modal sizes

Modal comes with 3 sizes .modal-[s/m/l].

Example:

Show small modal Show medium modal Show large modal

Code:

<article class="modal modal-s">
  ...
</article>
<article class="modal modal-m">
  ...
</article>
<article class="modal modal-l">
  ...
</article>

Popups

Popups are visually similar to modals, except they position is bind to an element which initialized them and they dont have overlay. Popup should be also automaticaly closed when clicking outside of it.
Simple popup component can be created with code shown in example below. Wide popup can be created with additional class .popup-l.

Warning

Popups have to be placed in the root element at the end of code because their position is absolute and should be counted from position of element to which it is bind.
Max height of popup should be also counted from height of aplication window and top/bottom offset.

Warning

Javascript functionality is there only for presentation purpose.

Example:

Button have popup

Wide popup

Code:

<body>
  ...
  <!-- page -->
  ...
  <article style="top:1267px; left:288px" class="popup">
    <section class="popup_content">
      ...
    </section>
  </article>

  <article style="top:1267px; left:770px" class="popup popup-l">
    <section class="popup_content">
      ...
    </section>
  </article>
</body>

Popups positions

Default position of popup is under element to which is popup bind. Above, left and right position can be set by using additional classes like .popup-[up/left/right].

Example:

Popup up Popup right Popup left

Code:

<body>
  ...
  <!-- page -->
  ...

  <!-- popup up -->
  <article class="popup-up">
    <section class="popup_content">
      ...
    </section>
  </article>

  <!-- popup left -->
  <article class="popup-left">
    <section class="popup_content">
      ...
    </section>
  </article>

  <!-- popup right -->
  <article class="popup-right">
    <section class="popup_content">
      ...
    </section>
  </article>
</body>

Tooltips

Example is tailored to react-tooltip plugin. Please check react tooltip documentation to see examples of usage.

Warning

This example does not contain any functionality and is purely for presentational purposes.

Warning

React tooltip should by placed in application root to work properly in all cases (modal etc.).

Warning

React-tooltip types (themes) are not included. Tooltips defaults to example below.

Example:

Code:

<span class="tooltip" data-tip="Tooltip example">Tooltip</span>
<i class="tooltip icon icon-m" data-tip="Tooltip over icon">help</i>