Popups

Lightweight and easily customizable alert message.

Popup Props


Popup Size [POPUP_SIZE]

Popups have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

.modal-sm
Small popoup width (300px)
.modal-md
Medium popoup width (500px)
.modal-lg
Large popoup width (800px)
.modal-xl
Extra large popoup width (1140px)
.modal-fullscreen
Fullscreen popoup

Text / Background Color Theme [POPUP_COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

View in new window for full preview

Link Theme data-bs-theme="[LINK_THEME]"

Set a minimum height for the entire header based on the height of the viewport.

light
Dark colored links for use against light background colors
dark
Light colored links for use against dark background colors

Section Modifier [MODIFIER]

Optionally add a modifier class to the component.

Javascript Contol


Popup Delay data-popup-delay="[POPUP_DELAY]"

Set delay, in seconds, before popup will show to user. Values: 0 - 60. Defaults to 5. Set to null to disable popup timer.

Popup Expire data-popup-expire="[POPUP_EXPIRE_DAYS]"

Set delay, in days, before popup cookie will expire. Values: 1 - 60. Defaults to 1 day.

Example
    
      <div class="modal ks-popup [MODIFIER]" id="[POPUP_ID]" tabindex="-1" aria-label="[POPUP_TITLE]" aria-hidden="true" data-bs-theme="[LINK_THEME]"data-popup-delay="[POPUP_DELAY]" data-popup-expire="[POPUP_EXPIRE_DAYS]">
        <div class="modal-dialog modal-dialog-centered [POPUP_SIZE]">
          <div class="modal-content [POPUP_COLOR_THEME]">
            <div class="modal-header">
              <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              ...
            </div>
          </div>
        </div>
      </div>

Basic Popup

View in new window
View in new window for full preview
      
        <div class="d-flex align-items-center justify-content-center" style="min-height: 50rem;">
    <button type="button" data-bs-toggle="modal" data-bs-target="#examplePopup" class="btn btn-outline-dark">Open Popup</button>
  </div>
  
  <div class="modal ks-popup" id="examplePopup" tabindex="-1" aria-label="" aria-hidden="true" data-bs-theme="light" data-popup-delay="4" data-popup-expire="1">
    <div class="modal-dialog modal-dialog-centered modal-md">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
      <h2>Popup Modal Example</h2>
      <p>Quod accusantium voluptatibus libero perferendis natus impedit obcaecati corporis accusamus eaque, aut esse ab laborum modi aliquam possimus praesentium illum.</p>
      <p>Perspiciatis dolorem enim ducimus, fuga consequatur nisi corporis, necessitatibus, molestias minima ipsa iste ex soluta quos voluptates provident veritatis quia!</p>
        </div>
      </div>
    </div>
  </div>

Fullscreen Popup

View in new window
View in new window for full preview
      
        <div class="d-flex align-items-center justify-content-center" style="min-height: 50rem;">
    <button type="button" data-bs-toggle="modal" data-bs-target="#examplePopupFullscreen" class="btn btn-outline-dark">Open Popup</button>
  </div>
  
  <div class="modal ks-popup centered-content" id="examplePopupFullscreen" tabindex="-1" aria-label="" aria-hidden="true" data-bs-theme="dark" data-popup-delay="4" data-popup-expire="1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen">
      <div class="modal-content text-bg-primary">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">
      <h2>Popup Modal Example</h2>
      <p>Quod accusantium voluptatibus libero perferendis natus impedit obcaecati corporis accusamus eaque, aut esse ab laborum modi aliquam possimus praesentium illum.</p>
      <p>Perspiciatis dolorem enim ducimus, fuga consequatur nisi corporis, necessitatibus, molestias minima ipsa iste ex soluta quos voluptates provident veritatis quia!</p>
      <button type="button" data-bs-dismiss="modal" class="btn btn-outline-light">Close Popup</button>
        </div>
      </div>
    </div>
  </div>