Modal

Modal dialogs for overlays and popups

Basic Usage

HTML 
<button class="bl-btn bl-btn-primary" data-modal-open="example-modal">
  Open Modal
</button>

<div class="bl-modal" id="example-modal" style="display: none;">
  <div class="bl-modal-backdrop"></div>
  <div class="bl-modal-dialog">
    <div class="bl-modal-content">
      <div class="bl-modal-header">
        <h3 class="bl-modal-title">Modal Title</h3>
        <button class="bl-modal-close"></button>
      </div>
      <div class="bl-modal-body">
        <p>Modal Content</p>
      </div>
      <div class="bl-modal-footer">
        <button class="bl-btn bl-btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Positions

You can display the modal at 9 different positions. All positions support automatic animations when opening and closing:

3x3 Grid - All Positions

HTML 
<!-- Top Left -->
<div class="bl-modal bl-modal-top-left" id="modal-top-left">
  <div class="bl-modal-backdrop"></div>
  <div class="bl-modal-dialog">
    <div class="bl-modal-content">
      <div class="bl-modal-header">
        <h3 class="bl-modal-title">Modal Top Left</h3>
        <button class="bl-modal-close"></button>
      </div>
      <div class="bl-modal-body">
        <p>This modal is displayed at the top left.</p>
      </div>
    </div>
  </div>
</div>

<!-- Other positions: bl-modal-top, bl-modal-top-right, bl-modal-left, 
     bl-modal-centered, bl-modal-right, bl-modal-bottom-left, 
     bl-modal-bottom, bl-modal-bottom-right -->

Available Positions

  • bl-modal-top-left - Top Left
  • bl-modal-top - Top Center
  • bl-modal-top-right - Top Right
  • bl-modal-left - Middle Left
  • bl-modal-centered - Middle Center (Standard)
  • bl-modal-right - Middle Right
  • bl-modal-bottom-left - Bottom Left
  • bl-modal-bottom - Bottom Center
  • bl-modal-bottom-right - Bottom Right

Animations

All modals have automatic animations when opening and closing. The animation depends on the modal position:

  • Top positions: Slide from top to bottom
  • Bottom positions: Slide from bottom to top
  • Left: Slide from left to right
  • Right: Slide from right to left
  • Centered: Fade-In/Out animation
  • Corners: Diagonal slide animation

The animations are automatically controlled by Baseline UI JavaScript. You don't need to do anything else - the animations work automatically when you use the corresponding positioning classes.

Open the modals above to see the different animations.

Sizes

You can control the modal size with different classes:

Small

HTML 
<div class="bl-modal bl-modal-sm" id="modal-sm" style="display: none;">
  <div class="bl-modal-backdrop"></div>
  <div class="bl-modal-dialog">
    <div class="bl-modal-content">
      <div class="bl-modal-header">
        <h3 class="bl-modal-title">Small Modal</h3>
        <button class="bl-modal-close"></button>
      </div>
      <div class="bl-modal-body">
        <p>This modal is smaller than the standard modal.</p>
      </div>
    </div>
  </div>
</div>

Large

HTML 
<div class="bl-modal bl-modal-lg" id="modal-lg" style="display: none;">
  <div class="bl-modal-backdrop"></div>
  <div class="bl-modal-dialog">
    <div class="bl-modal-content">
      <div class="bl-modal-header">
        <h3 class="bl-modal-title">Large Modal</h3>
        <button class="bl-modal-close"></button>
      </div>
      <div class="bl-modal-body">
        <p>This modal is larger than the standard modal.</p>
      </div>
    </div>
  </div>
</div>

Extra Large

HTML 
<div class="bl-modal bl-modal-xl" id="modal-xl" style="display: none;">
  <div class="bl-modal-backdrop"></div>
  <div class="bl-modal-dialog">
    <div class="bl-modal-content">
      <div class="bl-modal-header">
        <h3 class="bl-modal-title">Extra Large Modal</h3>
        <button class="bl-modal-close"></button>
      </div>
      <div class="bl-modal-body">
        <p>This modal is extra large for extensive content.</p>
      </div>
    </div>
  </div>
</div>

Example Modal

This is an example modal. You can close it with the X button or by clicking on the backdrop.