Skip to content

Commit

Permalink
More updates to the readme.
Browse files Browse the repository at this point in the history
  • Loading branch information
kylepaulsen committed Aug 4, 2014
1 parent 84eca50 commit 13e8422
Showing 1 changed file with 33 additions and 1 deletion.
34 changes: 33 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,36 @@ When defining custom button objects, here are the properties you can set and wha
- **primary**: A boolean (true or false). If this is true, it just adds the "nanoModalBtnPrimary" class to the button (which makes it look blue by default).
- **classes**: A string of space separated classes you want on the button: "myClassA myClassB"

### Note: You probably wont need to deal with the below objects.
### customShow and customHide
```javascript
nanoModal.customShow = function(defaultShow, modalAPI) {
defaultShow();
modalAPI.overlay.el.style.opacity = 0.5;
modalAPI.modal.el.style.opacity = 1;
};
nanoModal.customHide = function(defaultHide, modalAPI) {
modalAPI.overlay.el.style.opacity = 0;
// this is only needed if you have modals that open other modals on the onHide event.
// modalAPI.modal.onHideEvent.fire();
modalAPI.modal.el.style.opacity = 0;
if (document.body.style.transition !== undefined) {
setTimeout(defaultHide, 500);
} else {
defaultHide();
}
};
```

The customShow and customHide properties on the main nanoModal var can be used to customize the experience of your modals. When defined, your functions will get passed the defaultShow or defaultHide methods that you must call eventually. Your functions will also be passed the corresponding modalAPI that is responsible for the modal that is being shown or hidden. The above example shows how you can make all modals fade in and out. Keep in mind you will also need some CSS like:

```
.nanoModal.nanoModalOverride, .nanoModalOverlay.nanoModalOverride {
opacity: 0;
transition: opacity 0.5s ease;
}
```

### Note: You probably wont need to deal with the stuff below.
---

### El Objects
Expand Down Expand Up @@ -165,6 +194,9 @@ Modal events are just me making a super simple custom event system:
- modalEventObj **.removeAllListeners()**: Removes all listeners.
- modalEventObj **.fire()**: Calls all added listeners and passes them the arguments passed to this function.

### nanoModal.resizeOverlay()
This exists just in case the overlay is not behaving on your screen or mobile device.

# License

MIT

0 comments on commit 13e8422

Please sign in to comment.