Skip to content

Commit

Permalink
Add dialog example to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Nycto committed Sep 11, 2016
1 parent e755d13 commit 4ae2802
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,38 @@ that will clean up after itself when it is closed, like this:
.show();
```

Dialog
------

There is no built in dialog option, but there are tools to make it easy to
implement one yourself. If you think about it, dialogs are really just modals
that have some sort of 'result'. To achieve this, add click handlers that send
data to the `afterClose` function indicating the result:
([Run this code](http://jsfiddle.net/sLrkdjhL/))

```javascript
picoModal({
content: "<p>Ah, the pitter patter of tiny feet in huge combat boots.</p>" +
"<p class='footer'>" +
"<button class='cancel'>Cancel</button> " +
"<button class='ok'>Ok</button>" +
"</p>"
}).afterCreate(modal => {
modal.modalElem().addEventListener("click", evt => {
if (evt.target && evt.target.matches(".ok")) {
modal.close(true);
} else if (evt.target && evt.target.matches(".cancel")) {
modal.close();
}
});
}).afterClose((modal, event) => {
alert(event.detail ? "Ok" : "Cancelled");
}).show();
```

In the example above, notice the argument passed to `modal.close()` above, and
then accessing it by reading `event.detail`.

Animation
---------

Expand Down

0 comments on commit 4ae2802

Please sign in to comment.