69 lines
7.1 KiB
HTML
69 lines
7.1 KiB
HTML
<!doctype html>
|
|
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
|
|
<html class="no-js" lang="en" dir="ltr">
|
|
<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, user-scalable=no">
|
|
<title>Foundation for Sites Testing</title>
|
|
<link href="../assets/css/foundation.css" rel="stylesheet" />
|
|
<style>
|
|
.close-button.fixed {
|
|
position: fixed;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell">
|
|
<h1>Reveal: Tall Modal</h1>
|
|
|
|
<p>This tall modal scrolls within the the modal overlay.</p>
|
|
|
|
<p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
|
|
|
|
<div class="reveal" id="exampleModal1" data-reveal>
|
|
<button class="close-button" aria-label="Close alert" type="button" data-close>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
</div>
|
|
|
|
<p>This tall modal has a fixed-position close button, that sits over the overlay.</p>
|
|
|
|
<p><button class="button" data-toggle="exampleModal2">Toggle Trigger</button></p>
|
|
|
|
<div class="reveal" id="exampleModal2" data-reveal>
|
|
<button class="close-button fixed" aria-label="Close alert" type="button" data-close>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../assets/js/vendor.js"></script>
|
|
<script src="../assets/js/foundation.js"></script>
|
|
<script>
|
|
$(document).foundation();
|
|
</script>
|
|
</body>
|
|
</html>
|