<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<header>
<h1>iModal</h1>
</header>
<section>
<h2>The best modal ever made.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure architecto facere et illo rem labore aliquam quia molestias ut dolorum quidem enim dolor provident odio laborum dicta obcaecati non asperiores!</p>
<button class="button-border toggleModal">
<span class="icon"></span> trigger iModal</button>
</section>
<div class="modal">
<header>
<h2>Title</h2>
<button class="close toggleModal">Close</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur amis at adipisicing elit. Maiores quaerat est officia aut nam amet ipsum natus corporis adipisci cupiditate voluptas unde totam quae vel error neque odio id etas lasf reiciendis.</p>
</section>
<button class="button-border button-success">
<span class="icon"></span> Download</button>
<button class="button-border button-error pull-right">
<span class="icon"> </span>Lock</button>
</div>
</div>
<script>
/*
inspiration
---
https://tympanus.net/codrops/2013/11/07/css-overlay-techniques
icons
---
https://ios7-icon-font-demo.herokuapp.com/
*/
$('.toggleModal').on('click', function (e) {
$('.modal').toggleClass('active');
});
</script>
