Modal

Modal component pack for Seed

Install

npm install seed-modal --save

Dependencies


Bootstrap

Javascript

This component’s interactions are powered by Bootstrap. Refer to their modal documentation for Javascript usage.

CSS

This component does not require any of Bootstrap’s CSS for style. In fact, it is recommended that Bootstrap’s CSS are omitted for seed-modal to be styled properly.

Class names

In the markup examples (below), you will notice that for certain components there is a mixture of seed class names and Bootstrap class names. In order for dropdown’s to work properly, Bootstrap’s Javascript requires certain elements to have certain class names. seed-modal does not use any of these classes for styling.


Example

The modal’s inner content (.modal-content) uses the seed-card component pack for styling.

<!-- Button trigger modal -->
<button type="button" class="c-button" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content c-card">
      <div class="c-card__block c-card__block--sm">
        <div class="o-flexy">
          <div class="o-flexy__item">
            <h4 class="u-mrg-0">Heading</h4>
          </div>
          <div class="o-flexy__item">
            <a href="#" data-dismiss="modal" aria-label="Close">Close</a>
          </div>
        </div>
      </div>
      <div class="c-card__block">
        Modal content
      </div>
    </div>
  </div>
</div>

Sizes

The modal size can be adjusted by applying a size modifier class to .modal-dialog.

All of the following classes support responsive modifiers.

Below is an example of a large modal:

<!-- Button trigger modal -->
<button type="button" class="c-button" data-toggle="modal" data-target="#myModalSizes">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModalSizes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-dialog--lg" role="document">
    <div class="modal-content c-card">
      <div class="c-card__block c-card__block--sm">
        <div class="o-flexy">
          <div class="o-flexy__item">
            <h4 class="u-mrg-0">Heading</h4>
          </div>
          <div class="o-flexy__item">
            <a href="#" data-dismiss="modal" aria-label="Close">Close</a>
          </div>
        </div>
      </div>
      <div class="c-card__block">
        Modal content
      </div>
    </div>
  </div>
</div>
<div
  class="modal fade"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
>
  <div class="modal-dialog modal-dialog--lg" role="document">
    <div class="modal-content c-card">
      <div class="c-card__block">...</div>
    </div>
  </div>
</div>

Configurations

Below are the default Sass configuration variables for seed-modal. The variables can be found in the pack’s _config.scss file.

seed-modal/_config.scss
// Namespaces
$seed-modal-namespace: modal !default;
$seed-modal-backdrop-namespace: modal-backdrop !default;
$seed-modal-content-namespace: modal-content !default;
$seed-modal-dialog-namespace: modal-dialog !default;
$seed-modal-scrollbar-measure-namespace: modal-scrollbar-measure !default;
// Config: Modal
$seed-modal-z-index: 1050 !default;
// Config: Modal backdrop
$seed-modal-backdrop-background-color: #000 !default;
$seed-modal-backdrop-opacity-in: 0.5;
$seed-modal-backdrop-z-index: 1040;
// Config: Modal content
$seed-modal-content-box-shadow: 0 3px 9px rgba(black, 0.4) !default;
// Config: Modal dialog
$seed-modal-dialog-margin: 10px !default;
$seed-modal-dialog-margin-md: 30px auto !default;
$seed-modal-dialog-sizes: (
  sm: 300px,
  md: 600px,
  lg: 900px,
) !default;