Modals | Crossroads Digital Design Kit

Modals

There are three distinct styles of modal available in the DDK: a default modal, a video modal, and a full-screen modal. Achieving any style is as simple as adding modifier classes to the markup as specified below.

Default modal

<button type="button" class="btn btn-blue" data-toggle="modal" data-target="#defaultModal">
  Default modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 class="modal-title">Need a reminder?</h4>
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.</p>
      </div>
      <div class="modal-footer">
        <div class="btn-block-mobile">
          <button type="button" class="btn btn-blue btn-lg">Primary Action</button>
          <button type="button" class="btn btn-blue btn-outline btn-lg">Secondary Action</button>
        </div>
      </div>
    </div>
  </div>
</div>

Default modal with form

<button type="button" class="btn btn-blue" data-toggle="modal" data-target="#defaultModalForm">
  Default modal with form
</button>

<div class="modal fade" id="defaultModalForm" tabindex="-1" role="dialog" aria-labelledby="defaultModalFormLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 class="modal-title">Tell us more</h4>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        <form>
          <div class="form-group">
            <p class="font-size-large soft-half-top">Nullam id dolor id nibh?</p>
            <label class="sr-only" for="input">Input</label>
            <input class="form-control" name="input" placeholder="Placeholder" value="" type="text">
          </div>

          <div class="form-group">
            <p class="font-size-large soft-half-top">Lorem id dolor id nibh ultricies vehicula ut id elit?</p>
            <label class="sr-only">Default button group</label>
            <div aria-label="..." class="btn-group btn-group-block" role="group">
              <button class="btn btn-blue" type="button">Default</button>
              <button class="btn btn-blue" type="button">Label</button>
              <button class="btn btn-blue" type="button">Label</button>
              <button class="btn btn-blue" type="button">Label</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <div class="btn-block-mobile">
          <button type="button" class="btn btn-blue btn-lg">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Default modal with promo

<button type="button" class="btn btn-blue" data-toggle="modal" data-target="#defaultModalPromo">
  Default modal with promo
</button>

<div class="modal modal-promo fade" id="defaultModalPromo" tabindex="-1" role="dialog" aria-labelledby="defaultModalPromoLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 class="modal-title">Do life together</h4>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur.</p>
      </div>
      <div class="modal-footer">
        <div class="btn-block-mobile">
          <button type="button" class="btn btn-blue btn-lg">Find out how</button>
        </div>
      </div>
    </div>
  </div>
</div>

Video modal

To get the video modal to show display properly, add .modal-video to the wrapping modal div.

Bootstrap modals have a known problem where video audio will continue even after the modal is closed. There are a number of documented solutions to choose from. Bootstrap recommends this one.

<button type="button" class="btn btn-blue" data-toggle="modal" data-target="#videoModal">
  Video modal
</button>

<div class="modal modal-video fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe allowfullscreen="" src="https://www.youtube.com/embed/LIdCR2rywl4" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

Fullscreen modals slightly deviate from default modals in that they require an additional sizing class modifier to achieve the full-screen effect. For this modal to work, you must add a class of .modal-full to the .modal-dialog <div>. Full-screen modals also use the .alpha class in place of the .fade class to achieve a smoother animation.

Fullscreen modals also differ from their default counterparts in that you cannot close a fullscreen modal by clicking the background. This is achieved by added data-backdrop="static" to the wrapping .modal div.

In these examples, custom Javascript was written to create an interactive demonstration to open/close the following modals. These custom functions (openModal() and closeModal()) have been included via onClick events on the modal launch and modal escape buttons. You can learn more about Bootstrap's modals here.

Fullscreen modal

<button type="button" class="btn btn-blue" onClick="openModal('#fullscreenModal')">Fullscreen Modal</button>
<div class="modal modal-splash alpha" id="fullscreenModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="fullscreenModalLabel">
  <div class="modal-dialog modal-full">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close pull-right" type="button" onClick="closeModal('#fullscreenModal')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h4 class="modal-title">Try this</h4>
              <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="btn-block-mobile text-center">
          <button class="btn btn-blue btn-lg" type="button">Sounds great</button>
          <button class="btn btn-white btn-outline btn-lg" type="button" onClick="closeModal('#fullscreenModal')">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Fullscreen modal with form

<button type="button" class="btn btn-blue" onClick="openModal('#fullscreenModalForm')">Fullscreen modal with form</button>
<div class="modal modal-splash alpha" id="fullscreenModalForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="fullscreenModalFormLabel">
  <div class="modal-dialog modal-full">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close pull-right" type="button" onClick="closeModal('#fullscreenModalForm')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h4 class="modal-title">Do this</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            </div>
          </div>
          <div class="row push-half-top soft-top">
            <div class="col-md-6 col-md-offset-3">
              <form>
                <div class="form-group">
                  <label class="sr-only" for="input">Address 1</label>
                  <input class="form-control" name="input" placeholder="Address 1" value="" type="text">
                </div>

                <div class="form-group">
                  <label class="sr-only" for="input">Address 2</label>
                  <input class="form-control" name="input" placeholder="Address 2" value="" type="text">
                </div>

                <div class="form-group">
                  <label class="sr-only" for="input">City</label>
                  <input class="form-control" name="input" placeholder="City" value="" type="text">
                </div>

                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="sr-only" for="input">State</label>
                      <select class="form-control">
                        <option disabled="" selected="">State</option>
                        <option>Ohio</option>
                        <option>Ohio</option>
                        <option>Ohio</option>
                        <option>Ohio</option>
                        <option>Ohio</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="sr-only" for="input">Zip</label>
                      <input class="form-control" name="input" placeholder="Zip" value="" type="text">
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <div class="btn-block-mobile">
                <button class="btn btn-blue btn-lg" type="button">Add me to this</button>
                <button class="btn btn-white btn-outline btn-lg" type="button" onClick="closeModal('#fullscreenModalForm')">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>