Modals for lintel.
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.
Check the vars file in the sass
folder to see the full list of variables you can customize.
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
Default value: #fff
Default value: rgba(0,0,0,.6)
Default value: $border-radius-base
Default value: $box-shadow-dark
Default value: $z-index-3xl
Default value: 400px
Default value: 500px
Default value: 600px
This is the default modal width.
Default value: 700px
Default value: 800px
Default value: $border-base
Default value: $border-base
Default value: rgba(0,0,0,.5)
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;
Default value: $cushion-base
Change the background for a specific (*
) state. Ex: primary
, secondary
, error
, warning
, success
, info
Change the border-color for a specific (*
) state. Ex: primary
, secondary
, error
, warning
, success
, info
Change the text color for a specific (*
) state. Ex: primary
, secondary
, error
, warning
, success
, info
Default value: true
Determines whether to vertically center the modal for browsers that support flexbox. See usage below.
Check the mixins file in the sass
folder to see how you can extend this module.
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; }
}
}
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()
|
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. |
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. |
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>
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
});
<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>
<div class="modal-header">
<h1 class="modal-title">
Modal Title
</h1>
</div>
<div class="modal-header">
<h1 class="modal-title">
<a href="modal-title-link">Modal Link Title</a>
</h1>
</div>
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>
<div class="modal-header">
<button type="button" class="modal-close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="modal-title">
<a href="modal-title-link">Modal Link Title</a>
</h1>
</div>
<div class="modal-header">
<div class="modal-header-actions">
<button type="button" class="modal-close" aria-label="Close"><span aria-hidden="true">×</span></button>
</div><!--
--><h1 class="modal-title">
<a href="modal-title-link">Modal Link Title</a>
</h1>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<div class="btn-group">
<button class="btn" type="button">
Back
</button>
</div>
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>
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>
<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>
<div class="modal-container modal-max modal-full">...</div>
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.
Copyright (c) 2015 Marius Craciunoiu. Licensed under the MIT license.