Foundation/Reveal (Modal)/Nested (Flex)

foundation-reveal-modal-nested-flex.markdown

Foundation/Reveal (Modal)/Nested (Flex)

A Pen by Ian Kirkland on CodePen.

License.

index.html

<!-- This demo uses flex grid but you can use float grid too -->
<section class="container">

  <div class="row">
    <div class="columns">
      <h2>Reveal - Nested Modal</h2>
      <p>It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with <code>data-open</code> inside the first modal.</p>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <p><a data-open="exampleModal2">Click me for a modal</a></p>

      <!-- This is the first modal -->
      <div class="reveal" id="exampleModal2" data-reveal>
        <h1>Awesome!</h1>
        <p class="lead">I have another modal inside of me!</p>
        <a class="button" data-open="exampleModal3">Click me for another modal!</a>
        <button class="close-button" data-close aria-label="Close reveal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- This is the nested modal -->
      <div class="reveal" id="exampleModal3" data-reveal>
        <h2>ANOTHER MODAL!!!</h2>
        <button class="close-button" data-close aria-label="Close reveal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>

</section>

script.js

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://codepen.io/ZURBFoundation/pen/jmYLwq"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/2.1.1/what-input.min.js"></script>

style.css

/** 
 * Demo Styles 
 */
* { 
  color: #444444; 
}

body {
  padding: 2rem 1rem;
}

.container {
  width: 80%;
  margin: auto;
  margin-top: 2em;
}

.row {
  margin-bottom: 2em;
}

.row.small-up-12 {
  margin-bottom: 0;
}

.column {
  margin-bottom: .5em;
}

/* Hides Foundation Docs Callout */
[href*="https://foundation.zurb.com/sites.html"] {
	visibility: hidden !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 0px !important;
	height: 0px !important;
	display: none !important;
}

styles

<link href="https://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" />