Popup Trigger

Fixed position callout button used to open modals and popups.

Popup Trigger Props


Popup Target data-bs-target="[POPUP_TARGET]"

Uses the ID of a popup or modal.

Button Type [BUTTON_TYPE]

Use defined button classes.

View in new window for full preview
Example
    
      <div class="popup-callout-container">

        <!-- Button -->
        <button class="btn [BUTTON_TYPE]" type="button" data-bs-toggle="modal" data-bs-target="[POPUP_TARGET]">...</button>

      </div>

Popup Trigger Example

View in new window
View in new window for full preview
      
        <div class="popup-callout-container">
    <button type="button" data-bs-toggle="modal" data-bs-target="#examplePopupTrigger" class="btn btn-outline-dark">Open Popup</button>
    <button type="button" data-bs-toggle="modal" data-bs-target="#examplePopupTrigger" class="btn btn-cta">Open Popup</button>
    <button type="button" data-bs-toggle="modal" data-bs-target="#examplePopupTrigger" class="btn btn-secondary">Open Popup</button>
  </div>
  
  <div class="modal ks-popup" id="examplePopupTrigger" tabindex="-1" aria-label="" aria-hidden="true" data-bs-theme="light" data-popup-delay="null" 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>

Popup Trigger and Header

View in new window
View in new window for full preview