Foundation - Reveal Large Size Modal

Quiz

Description

It creates large size of modal.

Example

The following example demonstrates the use of large 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 Large 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 Large Size of Modal Example</h2>
<p><a data-toggle="reveal_modal">Click here to open modal</a></p>
<div class="large reveal" id="reveal_modal" data-reveal>
  <h2>Large 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_large_modal.html file.
Open this HTML file in a browser, an output is displayed as shown below.

Print Page