lintel-contrib-modals

Modals for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-modals --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-modals/sass/modals.scss"

This module also includes a JavaScript component, which you will have to load separately.

<script src="bower_components/lintel-contrib-modals/dist/modals.min.js" type="text/javascript"></script>

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$modal-padding-y & $modal-padding-x

Change default modal paddings.

The following vars are available for finer grained control (and default to these 2):

$modal-header-padding-y
$modal-header-padding-x
$modal-body-padding-y
$modal-body-padding-x
$modal-footer-padding-y
$modal-footer-padding-x

$modal-bg

Default value: #fff

$modal-border

Default value: rgba(0,0,0,.6)

$modal-border-radius

Default value: $border-radius-base

$modal-box-shadow

Default value: $box-shadow-dark

$modal-z-index

Default value: $z-index-3xl

$modal-xs-width

Default value: 400px

$modal-sm-width

Default value: 500px

$modal-md-width

Default value: 600px

This is the default modal width.

$modal-lg-width

Default value: 700px

$modal-xl-width

Default value: 800px

$modal-header-border

Default value: $border-base

$modal-footer-border

Default value: $border-base

$modal-overlay-bg

Default value: rgba(0,0,0,.5)

$modal-overlay-bg-fallback

Default value: #333

NOTE: If you do not want a fallback, set the fallback to the same value as the bg.

$modal-overlay-bg-fallback: $modal-overlay-bg;

$modal-overlay-padding-y & $modal-overlay-padding-y

Default value: $cushion-base

$modal-*-bg

Change the background for a specific (*) state. Ex: primary, secondary, error, warning, success, info

$modal-*-border

Change the border-color for a specific (*) state. Ex: primary, secondary, error, warning, success, info

$modal-*-text

Change the text color for a specific (*) state. Ex: primary, secondary, error, warning, success, info

$modal-center-y

Default value: true

Determines whether to vertically center the modal for browsers that support flexbox. See usage below.

Mixins

Check the mixins file in the sass folder to see how you can extend this module.

modal-state($bg, $border, $text)

Change this mixin to customize what each state does.

@mixin modal-state($bg, $border, $text) {
  .modal-header,
  .modal-footer {
    @if $bg     { background-color: $bg; }
    @if $border { border-color: $border; }
    @if $text   { color: $text; }
  }
}

JavaScript

Options

Name	Type	Default	Description
onShow	function		Callback function to execute every time modal is shown.
onHide	function		Callback function to execute every time modal is hidden.
esc	boolean	true	Close modal on escape key.
show	boolean	true	Show modal when invoking `.modal()`

Methods

Name	Parameters	Description
show	(options, relatedTarget)	Show modal. Related target is the trigger that opened the modal. Focus will return to this element when modal hides.
hide		Hide modal.

Events

Event	Description
show.lt.modal	Fires immediately before modal is shown. Can prevent modal from showing here. Trigger button (if provided) can be accessed under `relatedTarget`.
shown.lt.modal	Fires immediately after modal is shown.
hide.lt.modal	Fires immediately before modal is hidden. Can prevent modal from hiding here.
hidden.lt.modal	Fires immediately after modal is hidden.

Data-attr

Add data-toggle="modal" and data-target="#selector" to a button/element. You can add additional options as data-attributes.

<button type="button" data-toggle="modal" data-target="#myModal">
  Modal
</button>
<div id="myModal" class="modal">
...
</div>

jQuery

Call the jQuery plugin on the modal, passing in any options and the related target (button).

In order for events and onShow/onHide callbacks to have access to the triggering element(ie. button), provide the related target. See example for onShow/onHide below.

var options = {
  onShow: function(modal, button) {
    console.log('onShow', this, modal, button);
  },
  onHide: function(modal, button) {
    console.log('onHide', this, modal, button);
  },
  esc: false
};

$('#myButton').click(function(e) {
  $('#myModal').modal(options, this); // this == #myButton
});

Alternatively, you can use the default options:

$('#myButton').click(function(e) {
  $('#myModal').modal('show', this); // this == #myButton
});

Examples

Modal

<div class="modal">
  <div class="modal-container">
    <div class="modal-dialog">
      <form>
        <div class="modal-header">
          <h1 class="modal-title">
            <a href="modal-title-link">Modal Title</a>
          </h1>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">
              Email
              <input class="form-control" type="text" placeholder="Email">
            </label>
          </div>
          <div class="form-group">
            <label class="form-label">
              Password
              <input class="form-control" type="password" placeholder="Password">
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <div class="btn-group float-right">
            <button class="btn" type="button">
              Cancel
            </button>
            <button class="btn-primary" type="submit">
              OK
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Modal Header

<div class="modal-header">
  <h1 class="modal-title">
    Modal Title
  </h1>
</div>

Modal Header with Linked Title

<div class="modal-header">
  <h1 class="modal-title">
    <a href="modal-title-link">Modal Link Title</a>
  </h1>
</div>

Modal Header with Right Side Actions

NOTE: There should be no whitespace after .modal-header-actions. See Fighting the Space Between Inline Block Elements.

<div class="modal-header">
  <div class="modal-header-actions">
    <div class="btn-group">
      <button class="btn" type="button">
        Cancel
      </button>
      <button class="btn btn-primary" type="submit">
        OK
      </button>
    </div>
  </div><!--
  -->
  <h1 class="modal-title">
    <a href="modal-title-link">Modal Title</a>
  </h1>
</div>

Modal Header with Close Button

<div class="modal-header">
  <button type="button" class="modal-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h1 class="modal-title">
    <a href="modal-title-link">Modal Link Title</a>
  </h1>
</div>

Modal Header with Close Button in Right Side Actions

<div class="modal-header">
  <div class="modal-header-actions">
    <button type="button" class="modal-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  </div><!--
  --><h1 class="modal-title">
    <a href="modal-title-link">Modal Link Title</a>
  </h1>
</div>

Modal Body

<div class="modal-body">...</div>

Modal Footer

<div class="modal-footer">
  <div class="btn-group">
    <button class="btn" type="button">
      Back
    </button>
  </div>

Modal Footer with Right Side Actions

NOTE: There should be no whitespace after .modal-footer-actions. See Fighting the Space Between Inline Block Elements.

<div class="modal-footer">
  <div class="modal-footer-actions">
    <div class="btn-group">
      <button class="btn" type="button">
        Cancel
      </button>
      <button class="btn btn-primary" type="submit">
        OK
      </button>
    </div>
  </div><!--
  --><div class="btn-group">
    <button class="btn" type="button">
      Back
    </button>
  </div>

Vertical Center

If the body has the class .flexbox, the modal will be centered using flexbox. DO NOT ADD THIS CLASS MANUALLY. Nothing bad will probably happen if you do, but it's not recommended. This class should be added by modernizr. Set $modal-center-y to false if you wish to disable this feature.

<body class="flexbox">
  <div class="modal">...</div>
</body>

Sizes

<div class="modal-container modal-xs">...</div>
<div class="modal-container modal-sm">...</div>
<div class="modal-container modal-lg">...</div>
<div class="modal-container modal-xl">...</div>
<div class="modal-container modal-max">...</div>

Full Height and Width

<div class="modal-container modal-max modal-full">...</div>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
dist		dist
js		js
sass		sass
test		test
.csslintrc		.csslintrc
.editorconfig		.editorconfig
.gitignore		.gitignore
.jshintrc		.jshintrc
.yo-rc.json		.yo-rc.json
CONTRIBUTING.md		CONTRIBUTING.md
Gruntfile.js		Gruntfile.js
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
package.json		package.json

License

lintelio/lintel-contrib-modals

Folders and files

Latest commit

History

Repository files navigation

lintel-contrib-modals

Getting Started

Variables

$modal-padding-y & $modal-padding-x

$modal-bg

$modal-border

$modal-border-radius

$modal-box-shadow

$modal-z-index

$modal-xs-width

$modal-sm-width

$modal-md-width

$modal-lg-width

$modal-xl-width

$modal-header-border

$modal-footer-border

$modal-overlay-bg

$modal-overlay-bg-fallback

$modal-overlay-padding-y & $modal-overlay-padding-y

$modal-*-bg

$modal-*-border

$modal-*-text

$modal-center-y

Mixins

modal-state($bg, $border, $text)

JavaScript

Options

Methods

Events

Data-attr

jQuery

Examples

Modal

Modal Header

Modal Header with Linked Title

Modal Header with Right Side Actions

Modal Header with Close Button

Modal Header with Close Button in Right Side Actions

Modal Body

Modal Footer

Modal Footer with Right Side Actions

Vertical Center

Sizes

Full Height and Width

Contributing

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages