From: Kevin Ball Date: Mon, 15 May 2017 19:53:10 +0000 (-0700) Subject: Reveal vid links X-Git-Tag: v6.4.0-rc1~46^2~26^2~27 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e9a3067a80cbe323b9387a02dcbc426586ceee9d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Reveal vid links --- diff --git a/docs/pages/reveal.md b/docs/pages/reveal.md index b5ba640ca..c4d6d4a73 100644 --- a/docs/pages/reveal.md +++ b/docs/pages/reveal.md @@ -20,7 +20,7 @@ A modal is just an empty container, so you can put any kind of content inside it To create a modal, add the class `.reveal`, the attribute `data-reveal`, and a unique ID to a container.

- Watch this part in video + Watch this part in video

@@ -68,7 +68,7 @@ The size of a modal can be changed with these sizing classes, which are added to - `.full`: 100% width *and* height, defaults the `escClose` option to true, as well as creates a close button.

- Watch this part in video + Watch this part in video

@@ -114,10 +114,6 @@ The size of a modal can be changed with these sizing classes, which are added to It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with `data-open` inside the first modal. -

- Watch this part in video -

-
edit on codepen button
@@ -151,7 +147,7 @@ It's possible for modals to open other modals. Create a second modal with a uniq A full-screen modal is 100% of the width *and* height of the window. Add the `.full` class to make it go.

- Watch this part in video + Watch this part in video

@@ -176,10 +172,6 @@ A full-screen modal is 100% of the width *and* height of the window. Add the `.f To remove the overlay, add the attribute `data-overlay="false"` to the modal. -

- Watch this part in video -

-
edit on codepen button
@@ -202,7 +194,7 @@ To remove the overlay, add the attribute `data-overlay="false"` to the modal. To use animations from the Motion UI library, include the data-animation-in="someAnimationIn" and data-animation-out="someAnimationOut" attributes.

- Watch this part in video + Watch this part in video

@@ -243,10 +235,6 @@ $.ajax('/url') Modals by default are accessible through the use of various ARIA attributes. To make a modal even more accessible, designate a label to the modal by adding `aria-labelledby="exampleModalHeader11"` to the container and `id="exampleModalHeader11"` to the element you want to designate as the label. -

- Watch this part in video -

-
edit on codepen button