85 lines
4.0 KiB
HTML
85 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Responsive Modal Design</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="demo-btns">
|
|
<header>
|
|
<h1>Material Design Modals</h1>
|
|
</header>
|
|
|
|
<div class="info">
|
|
<div class="buttons">
|
|
<p>
|
|
<a href="" data-modal="#modal" class="modal__trigger">Modal 1</a>
|
|
<a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a>
|
|
<a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a>
|
|
</p>
|
|
</div>
|
|
<p>Click a button to activate a modal.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true">
|
|
<div class="modal__dialog">
|
|
<div class="modal__content">
|
|
<h1>Modal</h1>
|
|
<p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi. Normcore chambray locavore Banksy, YOLO meditation master cleanse readymade Bushwick.</p>
|
|
|
|
<!-- modal close button -->
|
|
<a href="" class="modal__close demo-close">
|
|
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true">
|
|
<div class="modal__dialog">
|
|
<div class="modal__content">
|
|
<h1>Big Modal</h1>
|
|
<h3>This modal is pretty tall.</h3>
|
|
<p>Selfies normcore four dollar toast four loko listicle artisan. Hoodie Marfa authentic, wayfarers church-key tofu Banksy pop-up Kickstarter Brooklyn heirloom swag synth. Echo Park cray synth mixtape. Tofu gastropub squid readymade, trust fund Wes Anderson DIY PBR 8-bit try-hard +1 Shoreditch lo-fi tote bag.</p>
|
|
<p><img src="http://unsplash.it/600/300" alt="" /></p>
|
|
<p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
|
|
<p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
|
|
<!-- modal close button -->
|
|
<a href="" class="modal__close demo-close">
|
|
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true">
|
|
<div class="modal__dialog">
|
|
<div class="modal__content">
|
|
<h1>Modal 3</h1>
|
|
<p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi.</p>
|
|
|
|
<!-- modal close button -->
|
|
<a href="" class="modal__close demo-close">
|
|
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ettrics -->
|
|
<a href="#" class="logo" target="_blank">
|
|
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
|
|
</a>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |