Skip to content

Commit

Permalink
Merge pull request #3 from gravitydepartment/issue/1-version-2
Browse files Browse the repository at this point in the history 
Issue/1 version 2
  • Loading branch information
@brendanfalkowski
brendanfalkowski authored Feb 18, 2019
2 parents d470b36 + 7c8ee1d commit 6b4f5f1
Show file tree
Hide file tree
Showing 5 changed files with 255 additions and 177 deletions.
150 changes: 90 additions & 60 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,78 @@ Simple modals with useful options.

## Features

- Create a modal from in-page HTML
- Create a modal manually on-the-fly
- Click the backdrop to close
### Two ways to use

- Create a modal and open it immediately.
- Trigger preconfigured modals hidden in the document.

### UI and transitions

- The modal is positioned to best fit the viewport.
- The modal and backdrop are animated when opening and closing.
- Replace an open model with a pleasing transition.

### Behaviors

- Click the backdrop to close (can be disabled).
- Press <kbd>ESC</kbd> to close (can be disabled).
- Custom events are dispatched when opened and closed.
- On close, the modal HTML automatically removes itself.

### Accessible

- Uses `<section>` to isolate heading hierarchy.
- Uses `role="dialog"` attribute.
- Uses `aria-label` attribute for close buttons.
- Focus is saved and restored when the modal closes.

### Customization

- Pass a `config` object to override any default.
- Override SCSS vars for styling.

## Dependencies

- jQuery 1.10.2
- None

## Usage

Include the script in your page:
Include the script in your page (and polyfills for IE11):

```html
<script src="path/to/jquery-1.10.2.js"></script>
<script src="path/to/modal.js"></script>
<script defer src="path/to/polyfill-custom-event.js"></script>
<script defer src="path/to/polyfill-object-assign.js"></script>
<script defer src="path/to/modal.js"></script>
```

Add modal markup to your HTML:
### Create and open a modal immediately

```javascript
var content = [
'<div class="modal_header">',
'<h1>Modal Title</h1>',
'</div>',
'<div class="modal_body">',
'<p>Nulla facilisi. Duis aliquet egestas purus in blandit.</p>',
'</div>'
];

var modal = new Modal({
content: content.join(''),
width: 's'
});
```

### Set up modals to open via an event listener

Add modal triggers and content to your HTML:

```html
<button type="button" data-modal="example-modal">
<button type="button" data-modal-trigger="example-modal">
Show Modal
</button>

<section class="modal" id="example-modal">
<script type="text/template" data-modal="example-modal">
<div class="modal_header">
<h1>Modal Title</h1>
</div>
Expand All @@ -56,71 +103,54 @@ Add modal markup to your HTML:
Close
</button>
</div>
</section>
</script>
```

Initialize all modals within the page:
Add event listeners to trigger each modal:

```javascript
if (jQuery().modal) {
var $modalButtons = jQuery('[data-modal]');
var modalTriggers = document.querySelectorAll('[data-modal-trigger]');

if ($modalButtons.length) {
$modalButtons.modal();
}
}
```
for (var i = 0; i < modalTriggers.length; i++) {
modalTriggers[i].addEventListener('click', function (e) {
e.preventDefault();

Or create a modal manually:
var config = {};
var modal = this.getAttribute('data-modal-trigger');
var width = this.getAttribute('data-modal-width');

```javascript
var modalContent = [
'<div class="modal_header">',
'<h1>Modal Title</h1>',
'</div>',
'<div class="modal_body">',
'<p>Nulla facilisi. Duis aliquet egestas purus in blandit.</p>',
'</div>'
];
config.content = document.querySelector('[data-modal="' + modal + '"]').innerHTML;

jQuery.fn.modal({
contentInline: modalContent.join(''),
maxWidth: 'medium',
showImmediately: true,
type: 'inline'
});
if (width) {
config.width = width;
}

new Modal(config);
});
}
```

## Documentation

### Options
### Configuration options

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

### Events
### Custom events

These events fire on the element assigned to `this.$modal` and bubble up:

- open.modal
- opened.modal
- close.modal
- closed.modal
- backdropClose.modal
- contentUpdate.modal
- `modal-opened`
- `modal-closed`
61 changes: 35 additions & 26 deletions css/src/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,17 @@
// Vars
// ==============================================

$modal-backdrop-opacity: 0.65 !default;
$modal-backdrop-transition-duration: 300ms !default;

$modal-close-button-size: 28px !default;
$modal-close-icon-size: 24px !default;

$modal-dialog-width-s: 400px !default;
$modal-dialog-width-base: 600px !default;
$modal-dialog-width-l: 800px !default;
$modal-dialog-transition-duration: 500ms !default;
$modal-dialog-translate-y: -250px !default; // Animate from this offset to final position
$modal-dialog-width-s: 400px !default;
$modal-dialog-width-base: 600px !default;
$modal-dialog-width-l: 800px !default;

$z-modal-backdrop: 900 !default;
$z-modal-dialog: 901 !default;
Expand All @@ -34,40 +39,52 @@ $z-modal-dialog: 901 !default;
// ==============================================

.modal_dialog {
visibility: hidden;
position: absolute;
z-index: $z-modal-dialog;
top: -100px;
right: 15px;
left: 15px;
right: $space-base;
left: $space-base;
border-radius: $radius-base;
background: #FFF;
box-shadow: 0 5px 15px 5px black(0.2);
opacity: 0;
transform: translateY($modal-dialog-translate-y);
transition:
opacity 250ms linear 0ms,
top 500ms ease-out 0ms,
visibility 0ms linear 500ms;
opacity ($modal-dialog-transition-duration / 2) linear 0ms,
top $modal-dialog-transition-duration ease-out 0ms,
transform $modal-dialog-transition-duration ease-out 0ms,
visibility 0ms linear $modal-dialog-transition-duration;
}

[data-modal-state='closed'] .modal_dialog {
overflow: hidden;
height: 0;
[data-modal-state='opening'] .modal_dialog {
visibility: visible;
}

[data-modal-state='open'] .modal_dialog {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-delay: 0ms;
}

[data-modal-state='closing'] .modal_dialog {
visibility: visible;
transform: translateY($modal-dialog-translate-y);
transition-delay: 0ms;
}

[data-modal-state='closed'] .modal_dialog {
visibility: hidden;
overflow: hidden;
height: 0;
}

// ----------------------------------------------

@media (min-width: 600px) {

.modal_dialog {
right: 25px;
left: 25px;
right: $space-xl;
left: $space-xl;
}

}
Expand Down Expand Up @@ -164,14 +181,6 @@ $z-modal-dialog: 901 !default;
padding: $space-l $space-base;
}

// Element scrolling is not reliable across devices.
/*
.modal_body--scroll {
overflow-y: auto;
max-height: 400px;
}
*/

.modal_body > *:last-child {
margin-bottom: 0;
}
Expand Down Expand Up @@ -235,12 +244,12 @@ $z-modal-dialog: 901 !default;
background: #000;
opacity: 0;
transition:
opacity 300ms linear 0ms,
visibility 0ms linear 300ms;
opacity $modal-backdrop-transition-duration linear 0ms,
visibility 0ms linear $modal-backdrop-transition-duration;
}

[data-modal-state='open'] .modal_backdrop {
visibility: visible;
opacity: 0.65;
opacity: $modal-backdrop-opacity;
transition-delay: 0ms;
}
Loading

0 comments on commit 6b4f5f1

Please sign in to comment.