Foundation - Reveal Tiny Size Modal

Quiz

Description

It creates small size of modal.

Example

The following example demonstrates the use of small size modal in Foundation −

<!doctype html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Reveal Small Size Modal</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
<h2>Reveal Small Size of Modal Example</h2>
<p><a data-toggle="reveal_modal">Click here to open modal</a></p>
<div class="tiny reveal" id="reveal_modal" data-reveal>
  <h2>Small Modal</h2>
  <p>Foundation is semantic, readable, flexible, and completely customizable.</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>
<script>
   $(document).ready(function() {
      $(document).foundation();
   })
</script>
</body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code reveal_small_modal.html file.
Open this HTML file in a browser, an output is displayed as shown below.

Print Page