Modal

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<div class="modal" tabindex="-1" role="dialog">
 2  <div class="modal-dialog" role="document">
 3    <div class="modal-content">
 4      <div class="modal-header">
 5        <h5 class="modal-title">Modal title</h5>
 6        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 7          <span aria-hidden="true">&times;</span>
 8        </button>
 9      </div>
10      <div class="modal-body">
11        <p>Modal body text goes here.</p>
12      </div>
13      <div class="modal-footer">
14        <button type="button" class="btn btn-primary">Save changes</button>
15        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
16      </div>
17    </div>
18  </div>
19</div>

PUIK

Basic Use

For any modal component that you use, replace the structure above with the following structure:

 1<div
 2  class="puik-modal puik-modal--dialog puik-modal--small puik-modal--invisible"
 3  role="dialog"
 4  aria-modal="true"
 5>
 6  <div class="puik-modal__dialogPanelContainer">
 7    <div id="headlessui-dialog-panel-12" class="puik-modal__dialogPanelContainer__dialogPanel">
 8      <header class="puik-modal__dialogPanelContainer__dialogPanel__header">
 9        <div class="puik-icon material-icons-round puik-modal__dialogPanelContainer__dialogPanel__header__icon" style="font-size: 24px;">home</div>
10        <div class="puik-tooltip puik-modal__dialogPanelContainer__dialogPanel__header__title" tabindex="0">
11          <div class="puik-tooltip__wrapper">
12            <h2 class="title">An awesome title</h2>
13          </div>
14        </div>
15      </header>
16
17      <div class="puik-modal__dialogPanelContainer__dialogPanel__content">
18        <!-- Your custom content here -->
19      </div>
20
21      <footer class="puik-modal__dialogPanelContainer__dialogPanel__footer">
22        <button class="puik-button puik-button--secondary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--second">
23          Awesome secondary button
24        </button>
25        <button class="puik-button puik-button--primary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--main">
26          Awesome main button
27        </button>
28      </footer>
29    </div>
30  </div>
31</div>

Remove the puik-modal--invisible class on the root element to make the modal appear, or add it to make the modal disappear.

info
You have to manually move the focus into the modal. Also remember that the focus must remain inside the modal while opened.

Variants

The following modal variants are available:

  • destructive
  • feedback
  • dialog

To use any of these variants, add the puik-modal--${variant} class to the root div:

 1<div
 2  class="puik-modal puik-modal--${variant} puik-modal--small"
 3  role="dialog"
 4  aria-modal="true"
 5>
 6  <div class="puik-modal__dialogPanelContainer">
 7    <div id="headlessui-dialog-panel-12" class="puik-modal__dialogPanelContainer__dialogPanel">
 8      <header class="puik-modal__dialogPanelContainer__dialogPanel__header">
 9        <div class="puik-icon material-icons-round puik-modal__dialogPanelContainer__dialogPanel__header__icon" style="font-size: 24px;">home</div>
10        <div class="puik-tooltip puik-modal__dialogPanelContainer__dialogPanel__header__title" tabindex="0">
11          <div class="puik-tooltip__wrapper">
12            <h2 class="title">An awesome title</h2>
13          </div>
14        </div>
15      </header>
16
17      <div class="puik-modal__dialogPanelContainer__dialogPanel__content">
18        <!-- Your custom content here -->
19      </div>
20
21      <footer class="puik-modal__dialogPanelContainer__dialogPanel__footer">
22        <button class="puik-button puik-button--secondary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--second">
23          Awesome secondary button
24        </button>
25        <button class="puik-button puik-button--primary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--main">
26          Awesome main button
27        </button>
28      </footer>
29    </div>
30  </div>
31</div>

Sizes

The following modal sizes are available:

  • small
  • medium
  • large

To use any of these sizes, add the puik-modal--${size} class to the root div:

 1<div
 2  class="puik-modal puik-modal--dialog puik-modal--${size}"
 3  role="dialog"
 4  aria-modal="true"
 5>
 6  <div class="puik-modal__dialogPanelContainer">
 7    <div id="headlessui-dialog-panel-12" class="puik-modal__dialogPanelContainer__dialogPanel">
 8      <header class="puik-modal__dialogPanelContainer__dialogPanel__header">
 9        <div class="puik-icon material-icons-round puik-modal__dialogPanelContainer__dialogPanel__header__icon" style="font-size: 24px;">home</div>
10        <div class="puik-tooltip puik-modal__dialogPanelContainer__dialogPanel__header__title" tabindex="0">
11          <div class="puik-tooltip__wrapper">
12            <h2 class="title">An awesome title</h2>
13          </div>
14        </div>
15      </header>
16
17      <div class="puik-modal__dialogPanelContainer__dialogPanel__content">
18        <!-- Your custom content here -->
19      </div>
20
21      <footer class="puik-modal__dialogPanelContainer__dialogPanel__footer">
22        <button class="puik-button puik-button--secondary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--second">
23          Awesome secondary button
24        </button>
25        <button class="puik-button puik-button--primary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--main">
26          Awesome main button
27        </button>
28      </footer>
29    </div>
30  </div>
31</div>

Side Button

You can add a side button in the footer to allow an additionnal action:

 1<div
 2  class="puik-modal puik-modal--dialog puik-modal--${size}"
 3  role="dialog"
 4  aria-modal="true"
 5>
 6  <div class="puik-modal__dialogPanelContainer">
 7    <div id="headlessui-dialog-panel-12" class="puik-modal__dialogPanelContainer__dialogPanel">
 8      <header class="puik-modal__dialogPanelContainer__dialogPanel__header">
 9        <div class="puik-icon material-icons-round puik-modal__dialogPanelContainer__dialogPanel__header__icon" style="font-size: 24px;">home</div>
10        <div class="puik-tooltip puik-modal__dialogPanelContainer__dialogPanel__header__title" tabindex="0">
11          <div class="puik-tooltip__wrapper">
12            <h2 class="title">The awesome title</h2>
13          </div>
14        </div>
15      </header>
16      <div class="puik-modal__dialogPanelContainer__dialogPanel__content">
17        <!-- Your custom content here -->
18      </div>
19      <footer class="puik-modal__dialogPanelContainer__dialogPanel__footer">
20        <button class="puik-button puik-button--secondary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--second">
21          Awesome secondary button
22        </button>
23        <button class="puik-button puik-button--primary puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--main">
24          Awesome main button
25        </button>
26        <span class="puik-modal__dialogPanelContainer__dialogPanel__footer__spacer"></span>
27        <button class="puik-button puik-button--text puik-button--md puik-modal__dialogPanelContainer__dialogPanel__footer__button--side">
28          Awesome side button
29        </button>
30      </footer>
31    </div>
32  </div>
33</div>
← Link
Progress Bar →