Skip to content

Commit 6b4f5f1

Browse files
brendanfalkowskibrendanfalkowski
authored
Merge pull request #3 from gravitydepartment/issue/1-version-2
Issue/1 version 2
2 parents d470b36 + 7c8ee1d commit 6b4f5f1

File tree

5 files changed

+255
-177
lines changed

5 files changed

+255
-177
lines changed

‎README.md

+90-60
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,78 @@ Simple modals with useful options.
1010

1111
## Features
1212

13-
- Create a modal from in-page HTML
14-
- Create a modal manually on-the-fly
15-
- Click the backdrop to close
13+
### Two ways to use
14+
15+
- Create a modal and open it immediately.
16+
- Trigger preconfigured modals hidden in the document.
17+
18+
### UI and transitions
19+
20+
- The modal is positioned to best fit the viewport.
21+
- The modal and backdrop are animated when opening and closing.
22+
- Replace an open model with a pleasing transition.
23+
24+
### Behaviors
25+
26+
- Click the backdrop to close (can be disabled).
27+
- Press <kbd>ESC</kbd> to close (can be disabled).
28+
- Custom events are dispatched when opened and closed.
29+
- On close, the modal HTML automatically removes itself.
30+
31+
### Accessible
32+
33+
- Uses `<section>` to isolate heading hierarchy.
34+
- Uses `role="dialog"` attribute.
35+
- Uses `aria-label` attribute for close buttons.
36+
- Focus is saved and restored when the modal closes.
37+
38+
### Customization
39+
40+
- Pass a `config` object to override any default.
41+
- Override SCSS vars for styling.
1642

1743
## Dependencies
1844

19-
- jQuery 1.10.2
45+
- None
2046

2147
## Usage
2248

23-
Include the script in your page:
49+
Include the script in your page (and polyfills for IE11):
2450

2551
```html
26-
<script src="path/to/jquery-1.10.2.js"></script>
27-
<script src="path/to/modal.js"></script>
52+
<script defer src="path/to/polyfill-custom-event.js"></script>
53+
<script defer src="path/to/polyfill-object-assign.js"></script>
54+
<script defer src="path/to/modal.js"></script>
2855
```
2956

30-
Add modal markup to your HTML:
57+
### Create and open a modal immediately
58+
59+
```javascript
60+
var content = [
61+
'<div class="modal_header">',
62+
'<h1>Modal Title</h1>',
63+
'</div>',
64+
'<div class="modal_body">',
65+
'<p>Nulla facilisi. Duis aliquet egestas purus in blandit.</p>',
66+
'</div>'
67+
];
68+
69+
var modal = new Modal({
70+
content: content.join(''),
71+
width: 's'
72+
});
73+
```
74+
75+
### Set up modals to open via an event listener
76+
77+
Add modal triggers and content to your HTML:
3178

3279
```html
33-
<button type="button" data-modal="example-modal">
80+
<button type="button" data-modal-trigger="example-modal">
3481
Show Modal
3582
</button>
3683

37-
<section class="modal" id="example-modal">
84+
<script type="text/template" data-modal="example-modal">
3885
<div class="modal_header">
3986
<h1>Modal Title</h1>
4087
</div>
@@ -56,71 +103,54 @@ Add modal markup to your HTML:
56103
Close
57104
</button>
58105
</div>
59-
</section>
106+
</script>
60107
```
61108

62-
Initialize all modals within the page:
109+
Add event listeners to trigger each modal:
63110

64111
```javascript
65-
if (jQuery().modal) {
66-
var $modalButtons = jQuery('[data-modal]');
112+
var modalTriggers = document.querySelectorAll('[data-modal-trigger]');
67113

68-
if ($modalButtons.length) {
69-
$modalButtons.modal();
70-
}
71-
}
72-
```
114+
for (var i = 0; i < modalTriggers.length; i++) {
115+
modalTriggers[i].addEventListener('click', function (e) {
116+
e.preventDefault();
73117

74-
Or create a modal manually:
118+
var config = {};
119+
var modal = this.getAttribute('data-modal-trigger');
120+
var width = this.getAttribute('data-modal-width');
75121

76-
```javascript
77-
var modalContent = [
78-
'<div class="modal_header">',
79-
'<h1>Modal Title</h1>',
80-
'</div>',
81-
'<div class="modal_body">',
82-
'<p>Nulla facilisi. Duis aliquet egestas purus in blandit.</p>',
83-
'</div>'
84-
];
122+
config.content = document.querySelector('[data-modal="' + modal + '"]').innerHTML;
85123

86-
jQuery.fn.modal({
87-
contentInline: modalContent.join(''),
88-
maxWidth: 'medium',
89-
showImmediately: true,
90-
type: 'inline'
91-
});
124+
if (width) {
125+
config.width = width;
126+
}
127+
128+
new Modal(config);
129+
});
130+
}
92131
```
93132

94133
## Documentation
95134

96-
### Options
135+
### Configuration options
97136

98137
```javascript
99-
var options = {
100-
addCloseLink: true, // {boolean} - Add a close link to the modal.
101-
classPrefix: '', // {string} - "namespace-" - Prefix all classes with a namespace. You'll need to modify the CSS if you use this.
102-
closeLinkLabel: '&times;', // {string} - "&times;|Close" - Label for the "close" link.
103-
contentInline: '', // {string} - Content to use instead of a selector.
104-
contentAjax: '', // {string} - Content returned by an AJAX request.
105-
loadingPlaceholder: '<div class="modal_body">Loading...</div>', // {string}
106-
maxWidth: '', // {string} - '' or "small|medium|large" - Max width of the modal.
107-
showImmediately: false, // {boolean} - Show the modal immediately.
108-
transitionEndTime: 500, // {number} - Milliseconds for the modal transition to complete (duration + delay) as set in CSS.
109-
/**
110-
* 'ajax' - The modal markup is returned by an AJAX response.
111-
* 'event' - The modal markup is returned by the "contentUpdate.modal" event.
112-
* 'id' - The modal markup is already in the DOM with a unique ID.
113-
* 'inline' - The modal markup is passed in as a string.
114-
*/
115-
type: 'id' // {string} - Source for the modal's content.
138+
var config = {
139+
addCloseButton: true, // {boolean} - Add a close link to the modal.
140+
allowBackdropClose: true, // {boolean} - Clicking the backdrop will close the modal.
141+
allowEscapeClose: true, // {boolean} - Pressing "ESC" will close the modal.
142+
class: '', // {string} - Class on "modal" element.
143+
closeButtonLabel: 'Close', // {string} - Label for the "close" link.
144+
content: null, // {string} - String of HTML content to render in the modal.
145+
id: 'modal-' + Date.now(), // {string} - ID on "modal" element.
146+
transitionEndTime: 500, // {number} - Milliseconds for the modal transition to complete (duration + delay) as set in CSS.
147+
width: 'base' // {string} - "base|fluid|s|l" - Max width of the modal.
116148
}
117149
```
118150

119-
### Events
151+
### Custom events
152+
153+
These events fire on the element assigned to `this.$modal` and bubble up:
120154

121-
- open.modal
122-
- opened.modal
123-
- close.modal
124-
- closed.modal
125-
- backdropClose.modal
126-
- contentUpdate.modal
155+
- `modal-opened`
156+
- `modal-closed`

‎css/src/_modal.scss

+35-26
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,17 @@
1111
// Vars
1212
// ==============================================
1313

14+
$modal-backdrop-opacity: 0.65 !default;
15+
$modal-backdrop-transition-duration: 300ms !default;
16+
1417
$modal-close-button-size: 28px !default;
1518
$modal-close-icon-size: 24px !default;
1619

17-
$modal-dialog-width-s: 400px !default;
18-
$modal-dialog-width-base: 600px !default;
19-
$modal-dialog-width-l: 800px !default;
20+
$modal-dialog-transition-duration: 500ms !default;
21+
$modal-dialog-translate-y: -250px !default; // Animate from this offset to final position
22+
$modal-dialog-width-s: 400px !default;
23+
$modal-dialog-width-base: 600px !default;
24+
$modal-dialog-width-l: 800px !default;
2025

2126
$z-modal-backdrop: 900 !default;
2227
$z-modal-dialog: 901 !default;
@@ -34,40 +39,52 @@ $z-modal-dialog: 901 !default;
3439
// ==============================================
3540

3641
.modal_dialog {
37-
visibility: hidden;
3842
position: absolute;
3943
z-index: $z-modal-dialog;
40-
top: -100px;
41-
right: 15px;
42-
left: 15px;
44+
right: $space-base;
45+
left: $space-base;
4346
border-radius: $radius-base;
4447
background: #FFF;
4548
box-shadow: 0 5px 15px 5px black(0.2);
4649
opacity: 0;
50+
transform: translateY($modal-dialog-translate-y);
4751
transition:
48-
opacity 250ms linear 0ms,
49-
top 500ms ease-out 0ms,
50-
visibility 0ms linear 500ms;
52+
opacity ($modal-dialog-transition-duration / 2) linear 0ms,
53+
top $modal-dialog-transition-duration ease-out 0ms,
54+
transform $modal-dialog-transition-duration ease-out 0ms,
55+
visibility 0ms linear $modal-dialog-transition-duration;
5156
}
5257

53-
[data-modal-state='closed'] .modal_dialog {
54-
overflow: hidden;
55-
height: 0;
58+
[data-modal-state='opening'] .modal_dialog {
59+
visibility: visible;
5660
}
5761

5862
[data-modal-state='open'] .modal_dialog {
5963
visibility: visible;
6064
opacity: 1;
65+
transform: translateY(0);
66+
transition-delay: 0ms;
67+
}
68+
69+
[data-modal-state='closing'] .modal_dialog {
70+
visibility: visible;
71+
transform: translateY($modal-dialog-translate-y);
6172
transition-delay: 0ms;
6273
}
6374

75+
[data-modal-state='closed'] .modal_dialog {
76+
visibility: hidden;
77+
overflow: hidden;
78+
height: 0;
79+
}
80+
6481
// ----------------------------------------------
6582

6683
@media (min-width: 600px) {
6784

6885
.modal_dialog {
69-
right: 25px;
70-
left: 25px;
86+
right: $space-xl;
87+
left: $space-xl;
7188
}
7289

7390
}
@@ -164,14 +181,6 @@ $z-modal-dialog: 901 !default;
164181
padding: $space-l $space-base;
165182
}
166183

167-
// Element scrolling is not reliable across devices.
168-
/*
169-
.modal_body--scroll {
170-
overflow-y: auto;
171-
max-height: 400px;
172-
}
173-
*/
174-
175184
.modal_body > *:last-child {
176185
margin-bottom: 0;
177186
}
@@ -235,12 +244,12 @@ $z-modal-dialog: 901 !default;
235244
background: #000;
236245
opacity: 0;
237246
transition:
238-
opacity 300ms linear 0ms,
239-
visibility 0ms linear 300ms;
247+
opacity $modal-backdrop-transition-duration linear 0ms,
248+
visibility 0ms linear $modal-backdrop-transition-duration;
240249
}
241250

242251
[data-modal-state='open'] .modal_backdrop {
243252
visibility: visible;
244-
opacity: 0.65;
253+
opacity: $modal-backdrop-opacity;
245254
transition-delay: 0ms;
246255
}

0 commit comments

Comments
 (0)