mirror of https://github.com/twbs/ratchet.git
Connor Sears
12 years ago
8 changed files with 212 additions and 1 deletions
@ -0,0 +1,27 @@
|
||||
/* Modals |
||||
-------------------------------------------------- */ |
||||
.modal { |
||||
position: fixed; |
||||
top: 0; |
||||
opacity: 0; |
||||
z-index: 11; |
||||
width: 100%; |
||||
min-height: 100%; |
||||
overflow: hidden; |
||||
background-color: #fff; |
||||
-webkit-transform: translate3d(0, 100%, 0); |
||||
transform: translate3d(0, 100%, 0); |
||||
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; |
||||
transition: transform .25s ease-in-out, opacity 1ms .25s; |
||||
} |
||||
|
||||
/* Modal - When active |
||||
-------------------------------------------------- */ |
||||
.modal.active { |
||||
opacity: 1; |
||||
height: 100%; |
||||
-webkit-transition: -webkit-transform .25s ease-in-out; |
||||
transition: transform: .25 ease-in-out; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
transform: translate3d(0, 0, 0); |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
/* ---------------------------------- |
||||
* MODAL v1.0.0 |
||||
* Licensed under The MIT License |
||||
* http://opensource.org/licenses/MIT
|
||||
* ---------------------------------- */ |
||||
|
||||
!function () { |
||||
var findModals = function (target) { |
||||
var i; |
||||
var modals = document.querySelectorAll('a'); |
||||
for (; target && target !== document; target = target.parentNode) { |
||||
for (i = modals.length; i--;) { if (modals[i] === target) return target; } |
||||
} |
||||
}; |
||||
|
||||
var getModal = function (event) { |
||||
var modalToggle = findModals(event.target); |
||||
if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); |
||||
}; |
||||
|
||||
window.addEventListener('touchend', function (event) { |
||||
var modal = getModal(event); |
||||
if (modal) modal.classList.toggle('active'); |
||||
}); |
||||
}(); |
||||
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Modal slideup</title> |
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<link rel="stylesheet" href="../../lib/css/base.css"> |
||||
<link rel="stylesheet" href="../../lib/css/bars.css"> |
||||
<link rel="stylesheet" href="../../lib/css/lists.css"> |
||||
<link rel="stylesheet" href="../../lib/css/forms.css"> |
||||
<link rel="stylesheet" href="../../lib/css/buttons.css"> |
||||
<link rel="stylesheet" href="../../lib/css/chevrons.css"> |
||||
<link rel="stylesheet" href="../../lib/css/counts.css"> |
||||
<link rel="stylesheet" href="../../lib/css/segmented-controllers.css"> |
||||
<link rel="stylesheet" href="../../lib/css/popovers.css"> |
||||
<link rel="stylesheet" href="../../lib/css/modals.css"> |
||||
<link rel="stylesheet" href="../../lib/css/sliders.css"> |
||||
<link rel="stylesheet" href="../../lib/css/toggles.css"> |
||||
<link rel="stylesheet" href="../../lib/css/push.css"> |
||||
<script src="../../lib/js/push.js"></script> |
||||
<script src="../../lib/js/toggles.js"></script> |
||||
<script src="../../lib/js/sliders.js"></script> |
||||
<script src="../../lib/js/popovers.js"></script> |
||||
<script src="../../lib/js/modals.js"></script> |
||||
<script src="../../lib/js/segmented-controllers.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-title"> |
||||
<h1 class="title">Modal slideup</h1> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<a href="#myModal" class="button">Open modal</a> |
||||
</div> |
||||
|
||||
<div id="myModal" class="modal"> |
||||
<header class="bar-title"> |
||||
<h1 class="title">Modal</h1> |
||||
<a class="button" href="#myModal"> |
||||
Close |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<p>Honey, check it out, you got me mesmerized |
||||
With your black hair and fat-ass thighs |
||||
Street poetry is my everyday |
||||
But yo, I gotta stop when you trot my way |
||||
If I was workin at the club you would not pay |
||||
Aiyyo, my man phife diggy, he got somthin to say</p> |
||||
|
||||
<p>I like em brown, yellow, puero rican or hatian |
||||
Name is phife dawg from the zulu nation |
||||
Told you in the jam that we can get down |
||||
Now lets knock the boots like the group h-town |
||||
You got bbd all on your bedroom wall |
||||
But Im above the rim and this is how I ball |
||||
A pretty little somethin on the new york street |
||||
This is how I represent over this here beat</p> |
||||
<p>Talkin bout you</p> |
||||
|
||||
<p>Yo, I took you out</p> |
||||
<p>But sex was on my mind for the whole damn route |
||||
My mind was in a frenzy and a horny state |
||||
But I couldnt drop dimes cause *you couldnt relate*</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue