javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modals with test and slide in up animation

Browse Source
This commit is contained in:
Max Lynch
2013-09-24 13:06:06 -05:00
parent 0de24259b9
commit f4131dd839
7 changed files with 2467 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
test/modals.html
View File

@@ -17,11 +17,38 @@
</header>
<main class="content padded has-header">
todo
<a href="#" class="button button-warning" id="modal-opener">Open Modal</a>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>
</section>
<div id="modal" class="modal slide-in-up">
<header class="bar bar-header bar-success">
<h1 class="title">BOOM</h1>
<a href="#" class="button" id="modal-closer">Close</a>
</header>
<main class="content padded has-header">
<h2>I'm a thing</h2>
<div style="background-color: red; width: 100%; height: 1000px"></div>
</main>
</div>
<script>
var open = document.getElementById('modal-opener');
open.addEventListener('click', function(e) {
var modal = document.getElementById('modal');
modal.classList.add('active');
return false;
});
var closer = document.getElementById('modal-closer');
closer.addEventListener('click', function(e) {
var modal = document.getElementById('modal');
modal.classList.remove('active');
return false;
});
</script>
</body>
</html>