Modal

A simple & lightweight method of displaying modal windows with jQuery.

Built on top of Kyle Fox’s jquery-modal. For a deeper look at the available options, please see the docs.

Some things to keep in mind:

Modals can be inline elements or external html files.
Only one modal can be opened at a time.

Structure

A Bluprnt themed modal consists of a header, body, and footer section.

You can add/remove sections as needed.

<section id="demoModal" class="bpModal">
  <header class="bpModal-header">
    <h1 class="bpModal-title">Modal Title</h1>
  </header>

  <div class="bpModal-body">
    <p>Modal content</p>
  </div>

  <footer class="bpModal-footer">
    <a class="button  button--link  button--sm  u-colorBlackish"
       href="#"
       rel="modal:close">Cancel</a>

    <a class="button  button--primary  button--sm"
       href="#"
       rel="modal:close">OK</a>
  </footer>
</section>

Modal Title

Modal content

Opening a modal

Simply add data-modal attribute to a link. The href value should be the ID of the div you want to open as a modal.

<a href="#myModal" data-modal>Open Modal</a>

For elements that don’t have an href attribute, we use the data-modal attribute and pass in the div ID as the value.

<button class="button" data-modal="#myModal">Open Modal</button>

Modal Title

Modal content

Open Modal

<!-- Modal Markup -->
<section id="myModal" class="bpModal">
  <header class="bpModal-header">
    <h1 class="bpModal-title">Modal Title</h1>
  </header>

  <div class="bpModal-body">
    <p>Modal content</p>
  </div>

  <footer class="bpModal-footer">
    <a class="button  button--link  button--sm  u-colorBlackish"
       href="#"
       rel="modal:close">Cancel</a>

    <a class="button  button--primary  button--sm"
       href="#"
       rel="modal:close">OK</a>
  </footer>
</section>

<!-- Triggers -->
<a href="#myModal" data-modal>Open Modal</a>
<button class="button" data-modal="#myModal">Open Modal</button>

Closing a modal

By default, a modal closes by clicking on the overlay, clicking the x in the modal, and by hitting the ESC key.

To close a modal via JavaScript, simply call $.modal.close();.

Similar to how links can be automatically bound to open modals, they can be bound to close modals using rel="modal:close":

<a href="#close" rel="modal:close">Close Modal</a>

Modal Title

Modal content

Close Modal

Open Modal

<!-- Modal Markup -->
<section id="closeExample" class="bpModal">
  <header class="bpModal-header">
    <h1 class="bpModal-title">Modal Title</h1>
  </header>

  <div class="bpModal-body">
    <p>Modal content</p>
    <p><a href="#close" rel="modal:close">Close Modal</a></p>
  </div>
</section>

<a href="#closeExample" data-modal>Open Modal</a>

Custom Theme

Modals are highly customizable. You can use utility classes to style it however you want.

Keep in mind, the bpModal class must always be present on the modal wrapper.

Hello world

Anything can go in here!

Open Custom Theme Modal

<!-- Custom Theme -->
<section id="customModal" class="bpModal">
  <div class="u-p4  u-bgGrayDarkest  u-colorWhite">
    <h1>Hello world</h1>
    <p>Anything can go in here!</p>
    <p>
      <img src="http://i.giphy.com/kW8mnYSNkUYKc.gif">
    </p>
  </div>
</section>
<!-- /Custom Theme -->


<a href="#customModal" data-modal>Open Custom Theme Modal</a>

Ajax Content

The Bluprnt modal has basic Ajax support. This means you can pass an html file to be loaded into a modal via ajax.

<a href="/path/to/somefile.html" data-modal>Open Ajax Modal</a>

or

<button data-modal="/path/to/somefile.html">Open Ajax Modal</button>