New This website is new, your feedback will help us to improve it.

Modal

Overview

Only one modal per page is supported by the BAS style kit Javascript.

Dependencies

See distribution for how to include these dependencies.

Uses

Modals can be useful for drawing the users attention to something, such as a time limit for booking a ticket.

In most cases modals should be avoided as they are hard to make accessible and do not work well on mobiles or small devices, especially where there is lots of content.

In most cases modals should be avoided as they are hard to make accessible and do not work well on mobiles or small devices, especially where there is lots of content.

Examples

<button id="open-modal" class="bsk-btn bsk-btn-primary" aria-label="Open modal">Open</button>
<div id="modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-black/50"></div>

  <!-- Modal panel -->
  <div class="relative mx-auto mt-12 max-w-sm md:max-w-xl lg:max-w-4xl h-[60vh] flex flex-col bg-white rounded-xl shadow-xl">

      <!-- Header -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 class="text-lg font-semibold text-gray-900">Modal</h2>
          <button id="close-nav-search" class="text-lg font-semibold !text-gray-900">✕</button>
      </div>

      <!-- Scrollable container -->
      <div class="flex-1 min-h-0 p-6 overflow-y-auto">
          <div class="h-full flex flex-col">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
              <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
          </div>
      </div>
  </div>    
</div>