1. Reveal Modal

In reveal model, zurb foundation framework provides pop-up windows or modal dialogs by using jquery plugins.

HTML Code

<a href="#" data-reveal-id="reModal">Reveal Modal</a>
<div id="reModal" class="reveal-modal" data-reveal>
  <h2>It is Reveal Model… </h2>
  <p class="lead">Awesome. It is work well…</p>
  <p>Reveals Model creates pop-up windows using jQuery plugins</p>
  <a class="close-reveal-modal">&#215 ;< /a>
</div>

Output

2. Joyride

Joyride allows user to move different section of web page without dragging.

HTML Code

<ol class="joyride-list" data-joyride>
  <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
    <p>Hello and welcome to the Joyride documentation page.</p>
  </li>
  <li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
    <h4>Stop #1</h4>
    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  </li>
  <li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
    <h4>Stop #2</h4>
    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
  </li>
  <li data-button="End" data-prev-text="Prev">
    <h4>Stop #3</h4>
    <p>It works as a modal too!</p>
  </li>
</ol>

1. Hello and welcome to the Joyride documentation page.

2. Stop #1

   You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.

3. Stop #2

   Get the details right by styling Joyride with a custom stylesheet!

4. Stop #3

   It works as a modal too!

Next Lesson > Foundation Content