<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="flex"> <a href="#">+</a> <div class="modal"> <div class="inner-modal"> <div class="content"> <h1>Modal Content</h1> <p>Pretty nifty.</p> </div> </div> </div> </div> <script> document.querySelector('a').addEventListener('click', function(e) { e.preventDefault(); this.classList.toggle('opened'); }); </script>

@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300'); * { box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1 { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 2.5em; margin-bottom: 0; } .flex { display: flex; } a:link, a:hover, a:visited, a:active { display: block; text-decoration: none; color: #fefefe; font-size: 2em; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%; background: #29B6F6; position: fixed; z-index: 2; top: calc(100% - 75px); left: calc(100% - 75px); transform-origin: 50%; transform: rotate(90deg); transition: all .5s ease; backface-visibility: hidden; } a:hover { background: #03A9F4; } a:active { box-shadow: inset 0 0 0.2em rgba(0, 0, 0, 0.3); } a.opened { top: -230px; left: -80px; transform: rotate(-45deg); transform-origin: 750%; } a.opened ~ .modal .inner-modal { width: 200vw; height: 200vw; } a.opened ~ .modal .inner-modal .content { opacity: 1; transition-delay: .5s; } .modal { border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: fixed; z-index: 1; top: 0; left: 0; } .modal .inner-modal { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: #01579B; width: 0; height: 0; transition: all 0.4s ease-in 0.4s; backface-visibility: hidden; } .modal .inner-modal .content { opacity: 0; transition: opacity .4s ease; backface-visibility: hidden; color: #fefefe; text-align: center; max-width: 90vw; max-height: 90vh; }