Create Modal or Popup Windows with Reveal

Last update on August 19 2022 21:51:22 (UTC/GMT +8 hours)

Introduction

You may create Modal or Popup Windows using Reveal - A Jquery Plugin from Zurb Foundation 3. In this tutorial, we will see how to use Reveal.

How to use it

Inclusion of files

There are two files which are required to be included to make Reveal work. These two files are: foundation.js (or a minified version of it) and foundation.css.

The HTML

And then you may set the HTML required. Here is an example of how you may do it:

<div id="exampleModal" class="reveal-modal">
  <h2>You are reading w3resource tutorials.</h2>
  <p class="lead">We offer web development tutorials.</p>
  <p>We have more than 2000 tutorials on various topics related to web development.</p>
  <a class="close-reveal-modal">×</a>
</div>

You must add markup for Reveal at the end of the page, after you finish all your rows and columns. Now you add a link / button so that user can click that to open the modal window. Like following:

<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal…</a></p>

Notice that the value of the 'data-reveal-id' attribute is same as the value of the id attribute of the div containing modal. Here is the complete example code:

Code:

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <title>Reveal Example, created with Foundation 3</title>
  <link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
  </head>
<body>
<div class="row">
  <div class="six columns">
	<h3>This page contains modal dialog.</h3>
	<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal…</a></p>
  </div>
</div>
<div id="exampleModal" class="reveal-modal">
  <h2>You are reading w3resource tutorials.</h2>
  <p class="lead">We offer web development tutorials.</p>
  <p>We have more than 2000 tutorials on various topics related to web development.</p>
  <a class="close-reveal-modal">×</a>
</div>
<script src="../zurb-foundation3/foundation3/javascripts/jquery.min.js"></script>
<script src="../zurb-foundation3/foundation3/javascripts/app.js"></script>
<script src="../zurb-foundation3/foundation3/javascripts/jquery.reveal.js"></script>
</body>
</html>

View online demo.

Reveal using JavaScript

You may use JavaScript to achieve the same. In that case, add the following JavaScript at the end of your page:


<script type="text/javascript">
  $(document).ready(function() {
    $('#buttonForModal').click(function() {
      $('#myModal').reveal();
    });
  });
</script>

Options

There are several options available to enhance the functionalities of Reveal. If you are using JavaScript, you may use it as following:

$('#myModal').reveal({
     animation: 'fadeAndPop', //fade, fadeAndPop, none
     animationspeed: 300, //how fast animations are
     closeOnBackgroundClick: true, //if you click background will modal close?
     dismissModalClass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});

Previous: Create Responsive Image and Content Slider with Orbit