Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st November 2013

How to build flying modal boxes

VentureWeb creative director Jesse Korzan explains how to emulate the fly-out page navigation so skillfully used within the Juliana Bicycles site

How to build flying modal boxes

DOWNLOAD TUTORIAL CODE

Index HTML

This short tutorial consists of four files: index.html, source.html, styles.css and script.js. Starting with the index.html file, you can use any markup you prefer, just so long as the primary elements are an with an href set. In this particular example, we are going to reference these as class=”pages”. In this example class=”target” is the flying modal box.

Source HTML

This is the document we want to load into the flying modal box. It can be as complicated as you want, so long as a parent container has a unique ID called ‘content’, which is referenced in the JavaScript.

CSS for ‘pages’

In styles.css, after the body class, we define a recommended box modal applied to all elements. We also define a pseudo element .page:before with an absolutely positioned span to maintain aspect ratios for a responsive grid. The ‘pages’ are then floated left to form the basic grid, held together by the wrapper class:

001 STYLES.CSS: 
002 *{
003 -webkit-box-sizing: border-box;
004 }
005
006 a {

007 text-decoration: none; 
008 -webkit-transition: all 0.6s ease- in- out;
009 }

010
011 .wrapper {
012 width: 100%;
013 max-width: 800px;
014 margin: 0 auto;
015 }

016
017 .page {
018 background: white;
019 position: relative;
020 width: 33%;
021 float: left;
022 margin: 0 1px 1px 0;
023 text-align: center;
024 cursor: pointer;
025 color: silver;
026 }
027
028 .page:before {
029 content: “”;
030 display: block;
031 padding-top: 100%;
032 }
033
034 .page:hover {
035 background: silver;
036 color: white;
037 }
038
039 .page:last {
040 margin-right: 0;
041 }

042
043 span {
044 position: absolute;
045 top: 0;
046 left: 0;
047 bottom: 0;
048 right: 0;
049 padding: 44px;
050 }

CSS for ‘target’

Next are the styles for the ‘target’ or flying modal box – basically speaking, an absolutely positioned element that is hidden until we need it. Using CSS3 transitions, the JavaScript will add and remove classes to the ‘target’ to give it the flying motion. Lastly, the ‘close’ element in our ‘target’ is so that we can close the modal and select a different ‘page’.

001 STYLES.CSS:
002 .target {
003 position: absolute;
004 background: crimson;
005 color: white;
006 padding: 44px;
007 opacity: 0;
008 width: 0;
009 height: 0;
010 display: block;
011 overflow: hidden;
012 }
013 .target .content {
014 opacity: 0;
015 -webkit-transition:all 360ms ease- in-out;
016 }
017 .target.move {
018 -webkit-transition:all 360ms ease- in-out;
019 } 
020 .target.on {
021 opacity: 1;
022 z-index: 99999;
023 }
024 .target.expand {
025 top: 0 !important;
026 bottom: 0 !important;
027 left: 0 !important;
028 right: 0 !important;
029 width: 100% !important;
030 height: 100% !important;
031 }
032 .target.expand .content, .target. expand .close {
033 opacity: 1; }
034 .target .close {
035 position: absolute;
036 top: 44px;
037 right: 44px;
038 opacity: 0;
039 -webkit-transition :all 360ms ease-in-out;
040 }
041 .target .close:after {
042 position: relative;
043 content: “x”;
044 color: white;
045 width: 30px;
046 height: 30px;
047 display: block;
048 border: 2px solid white;
049 text-align: center;
050 }

Follow the script

Our script.js listing uses jQuery and AJAX to cache the elements and crucially time the transitions. Check the full code on the CD and also the Scriptjs_FAQ.pdf for a function breakdown. Ensure script.js and jQuery are linked to your index.html page to preview. Be aware that this example is Chrome or WebKit only, but can be quickly adjusted for all modern browsers.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.