"modal"
Bootstrap 3.0.0 Snippet by zeeshan004

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ettrics/pen/XJoWWM?depth=everything&limit=all&order=popularity&page=6&q=modal&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">* { box-sizing: border-box; } body { background: #38c5b9; font-family: 'Montserrat'; font-weight: 300; line-height: 1.5; } a { text-decoration: none; color: inherit; } .buttons-ctn { will-change: transform; position: absolute; top: 50%; left: 50%; margin-left: -140px; margin-top: -30px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .button { will-change: transform; position: relative; float: left; display: inline-block; padding: 20px; width: 140px; text-align: center; line-height: normal; -webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .button--left { background: #141414; color: white; } .button--right { background: #ebebeb; color: #141414; } .button--active { cursor: default; } .button--active span { opacity: 0; } .button__content { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 60px 20px; text-align: center; width: 600px; visibility: hidden; opacity: 0; z-index: 10; color: white; } .button__content--left { color: white; } .button__content--left a { color: #141414; background: white; } .button__content--right { color: #141414; } .button__content--right a { color: white; background: #141414; } .button__content--active { opacity: 1; visibility: visible; } .button__content a { display: inline-block; padding: 10px 20px; } .button__content h2 { font-size: 36px; text-transform: uppercase; letter-spacing: 3px; font-weight: 300; } @media (max-width: 650px) { .button__content { width: 295px; } } main { color: white; text-align: center; } main h1 { font-weight: 300; margin-bottom: 8px; margin-top: 24px; } main p { margin-top: 0; } main p a { font-size: 20px; position: absolute; left: 0; right: 0; bottom: 24px; color: rgba(0, 0, 0, 0.6); } </style></head><body> <div class="buttons-ctn"> <a href="" class="button button--left"><span>Left</span></a> <a href="" class="button button--right"><span>Right</span></a> </div> <div class="button__content button__content--left"> <h2>You chose left!</h2> <a href="">Signup for nothing here</a> </div> <div class="button__content button__content--right"> <h2>You chose right!</h2> <a href="">Signup for nothing here</a> </div> <main> <h1><a href="http://ettrics.com">Ettrics</a></h1> <p>Shifting Material Button Modal</p> <p><a href="http://ettrics.com/code/shifting-material-button-modal/" target="_blank">Read article on Ettrics.com</a></p> </main> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >var button = $('.button'); var content = $('.button__content'); var win = $(window); var expand = function() { if (button.hasClass('button--active')) { return false; } else { var W = win.width(); var xc = W / 2; var that = $(this); var thatWidth = that.innerWidth() / 2; var thatOffset = that.offset(); var thatIndex = that.index(); var other; if (!that.next().is('.button')) { other = that.prev(); } else { other = that.next(); } var otherWidth = other.innerWidth() / 2; var otherOffset = other.offset(); // content box stuff var thatContent = $('.button__content').eq(thatIndex); var thatContentW = thatContent.innerWidth(); var thatContentH = thatContent.innerHeight(); // transform values for button var thatTransX = xc - thatOffset.left - thatWidth; var otherTransX = xc - otherOffset.left - otherWidth; var thatScaleX = thatContentW / that.innerWidth(); var thatScaleY = thatContentH / that.innerHeight(); that.css({ 'z-index': '2', 'transform': 'translateX(' + thatTransX + 'px)' }); other.css({ 'z-index': '0', 'opacity': '0', 'transition-delay': '0.05s', 'transform': 'translateX(' + otherTransX + 'px)' }); that.on('transitionend webkitTransitionEnd', function() { that.css({ 'transform': 'translateX(' + thatTransX + 'px) scale(' + thatScaleX +',' + thatScaleY + ')', }); that.addClass('button--active'); thatContent.addClass('button__content--active'); thatContent.css('transition', 'all 1s 0.1s cubic-bezier(0.23, 1, 0.32, 1)'); that.off('transitionend webkitTransitionEnd'); }); return false; } }; var hide = function(e) { var target= $(e.target); if (target.is(content)) { return; } else { button.removeAttr('style').removeClass('button--active'); content.removeClass('button__content--active').css('transition', 'all 0.2s 0 cubic-bezier(0.23, 1, 0.32, 1)'); } }; var bindActions = function() { button.on('click', expand); win.on('click', hide); }; var init = function() { bindActions(); }; init(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: