Modals

Codebase modals are a activator components using data-content-id="{identifier}" for specificity.

The modal’s content has no styling of its own – style it how you want.** At minimum, give it a background color and some padding. Maybe incorporate a Codebase card, layout system or tab system. It’s all up to you.

Modals can be dismissed (deactivated) by "click/tap outside to dismiss" and/or by a .modal-close element situated inside the modal content element.

The modal’s semi-transparent backdrop is a huge CSS box shadow on the modal content – it is not a separate layer. Hat tip: João Victor’s Medium article, "How to create a simple overlay that works anywhere".

The Simplest Modal

Modal example 1 – the simplest modal

<div class="modal">
  <div class="modal-content" id="modal-example-1">
    <p>
      Lorem ipsum dolor sit amet usu in odio gubergren conclusionemque.
    </p>
    <div class="right">
      <a class="modal-close">Close</a>
    </div>
  </div>
</div>
<button class="btn modal-ctrl" data-content-id="modal-example-1">Modal example 1</button>

Modals Expand to Fit Any Size Content

If you don’t use any modal constraint classes (as described below), then you get a modal that will take the width of its content, out to the max-width of the viewport and 85% of the viewport height this viewport height restriction allows for the browser bar, where it is on-screen.

By default, modals have their .modal-content CSS set to overflow: auto, so that extra long text and/or table content will automatically allow scrolling.

However, modal images that are too tall will always be responsively scaled down to maximum 70% of the viewport height (image width/height proportions are retained). This max-height ensures that images can be entirely displayed within the modal and also allow a little room for a short image title on a single line of text. (This provides a very simple "lightbox" setup.)

Modal example 2a – modal with a tall narrow image

Modal example 2b – modal with a short wide image

Modal example 2c – modal with a gigantic image

You can constrain the modal content width by adding a CSS width or max-width. And Codebase modals can be optionally constrained to a narrow width using classes .container.container-sm.

Modal example 2d Narrow modal with a lot of text, and .container.container-sm.

Integrating a Card into a Modal

Codebase modals come with (almost) no styling of their own – so you can do whatever you like with them. If you require a block header, body and footer then you can easily integrate a Codebase card (or media object).

Modal example 3 – narrow modal integrating a card plus some extra styling.

</div class="modal">
  <div id="modal-example-3" class="modal-content container container-sm card">
    <div class="card-header">
      Card header content
    </div>
    <div class="card-body">
      Card body content
    </div>
    <div class="card-footer">
      Card footer content
      <span class="modal-close float-right uppercase">Dismiss</span>
    </div>
  </div>
</div>
<button class="modal-ctrl btn" data-content-id="modal-example-3">Modal example 3</button>

Integrating a CSS Grid System into a Modal

You can also put a grid into a modal (with or without incorporating it into a card).

Also, if you need to constrain the modal container width, you can do add a container of your choice.

Modal example 4 – modal with a grid system inside a card

</div class="modal">
  <div id="modal-example-4" class="modal-content container card">
    <div class="card-header">
      <span class="modal-close float-right">&times;</span>
      Card header content
    </div>
    <div class="card-body flexbox flexbox-gap">
      <div class="flex-item-md-span-6">
        <!-- First flex-item content -->
      </div>
      <div class="flex-item-md-span-6">
        <!-- Second flex-item content -->
      </div>
    </div>
    <div class="card-footer">
      Card footer content
    </div>
  </div>
</div>
<button class="modal-ctrl btn" data-content-id="modal-example-4">Modal example 4</button>

Scrollable Modal with Fixed Header / Footer

The Codebase modal modifier class .modal-fix is designed to work with the use of a Codebase card in the modal. .modal-fix prevents the modal’s default overflow scrolling and enables card header to be fixed to the top and/or and footer to be fixed to the bottom of the modal – and the card body is allowed to have overflow scrolling.

.modal-fix is what you need when your modal contains a lot of text or table data.

Modal example 5 – modal with a card inside.

Full-Cover Modal

If you require a modal to cover the entire window, add .modal-content-cover.

Modal example 6 – full cover modal

Modal Classes

The table below includes only classes for the modal itself. For card classes see card. For flexbox layout classes see flexbox classes.

Class	Explanation
.modal	The modal block. Also serves as the modal backdrop.
.modal-ctrl1 data-content-id="{ID}"	Opening control (e.g. button) {ID} = the ID of the modal content to be opened
.modal-close	(Optional) modal close control, to be placed within the modal content element.
.modal-content2	The modal itself. (A unique ID is also required, of your choice – see data-content-id="{ID}" above.)
.modal-content-fix	(Optional) if a .card is being used in a modal, this class will fix .card-header and/or .card-footer while the .card-body remains vertically scrollable. Ideal for use with constrained-width modals that have a lot of content.
.modal-content-cover	(Optional) full cover

¹ Note: Do not put the .modal-ctrl inside the .modal container, because .modal is styled for use as the backdrop.

² By default the modal content width is unconstrained – so the width becomes whatever the content needs ("expand to fit"). You can constrain modal content widths with e.g. .container.container-sm.

---