morphing modal window
January 28, 2015 | 74 Feedbacks

Morphing Modal Window

A call-to-action button that animates and turns into a full-size modal window.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Modal windows are used to display related content, by hiding temporarily the main content. If we imagine our web page as layers distributed along the z-axis, modal windows are on top.

With this nugget we wanted to spice-up the way we fire the modal window: the button that triggers the action animates and turns into a full-width new page. We tried something similar with the product quick view nugget.

The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.

Creating the structure

The HTML structure is quite basic: a .cd-section element is used to wrap the section content, the action button (.cd-modal-action) and the modal window (.cd-modal).
The .cd-modal-action contains the .btn button, which is used to trigger the action, and the .cd-modal-bg, which is used as modal background.  The modal content is wrapped in the .cd-modal-content element and placed inside the div.cd-modal.

Adding style

We used the .cd-modal-bg element as modal window background: initially it is in absolute position and placed right behind the .btn action button, with a visibility: hidden.
When user clicks the action button, the .btn button is morphed into a circle (using the class .to-circle), while the .cd-modal-bg becomes visible and is scaled up to cover the entire viewport. The scale value depends on the viewport size, and is evaluated (and assigned) using Javascript.

At the end of the scale-up animation, the modal window visibility is changed (using the .modal-is-visible class) to reveal its content.

Events handling

We used jQuery to evaluate those parameters which are not accessible through CSS: the scale value assigned to the .cd-modal-bg , and its left and top position.
For example, this is how we evaluate the scale value:

Changelog

Feb 08, 2015
  • Bug fixed - z-index issue when two or more modals are used
Jan 28, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Andrea Coronese

    Little point: add vendor-specific attributes on css for “transition” (-webkit-transition, -moz-transition and so on). Improves browser compatibility even for older versions.

    • http://codyhouse.co Claudia Romano

      Hi Andrea, thanks for the feedback! Actually we don’t add vendor-specific attributes in the article for brevity, but you can find them in the download version.

      • Andrea Coronese

        keep in mind that most people are very likely to copy-paste these example without getting downloads or whatever, so unless they use stylus+nib or something like that they will end missing something, unless they are already skilled ;-)

  • Tilo Mitra

    Very nice effect!

  • Nick

    Hi Claudia,

    Just wanted to say I really appreciate all the awesome stuff you and Sebastiano create and then share with everyone. Thank you!

    This is kind of a “wish-list” suggestion. I think it would be AWESOME if you guys created a responsive front-end framework. I’m a fan of Bootstrap and Foundation, but I know you guys would blow them out of the water. I love your style and the functionality of the nuggets you guys create are awesome and on the edge!

    Thanks again for all the great work! I really hope you consider the front-end framework!

    Nick

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Nick, thanks for the kind words! A framework is something we’ve been thinking about. We’re currently putting together our first product for designer. After that, a responsive framework could def be something to explore ;)

      • Nick

        That’s great to hear about the framework!!!

        The Icon set looks pretty sweet. Can’t wait to see the final product!

  • http://www.tolgaergin.com/ Tolga Ergin

    Oh No Claudia :)
    I’m doing this for my theme :) thanks making it real

  • indo

    Line 229 of style.scss from the source download- transateZ should be translateZ

    • http://codyhouse.co Claudia Romano

      Fixed! thanks ;)

  • Andrew Dotson

    NIce work!

  • Pierre

    Hi.
    Love all your work. When I set two or more modals the trigger button of the lower modals is still showing when I trigger a modal above. Help on how I can fix this would be much appreciateed.

    Thanks! :)

    (Yes, you may call me stupid. :)

    • http://www.freedomdigital.com.br/ Kiko Garcia

      hey, I resolved it. read my latest comment :D

  • Guest

    Hi Claudia. Love this very nice work. I would love you use this on a wordress project but I have no idea how to impliment it.

  • http://www.angelusmedia.co.uk/ Gareth Gabriel

    Hi Claudia
    Love this very nice work.
    I would love to use this in a wordpress website but I have no idea how I would impliment it!!!

  • http://webplatformdaily.org Šime Vidas

    Why is the button a <a> instead of a <button>? (Note: This is a trick question ^_^)

  • http://chuquangtu.com/blog Chu Quang Tú

    I had double WOW moments. Very nice work. Thank you so much.

  • http://designfreak.me/ designfreakme

    This is very slick, thanks for sharing!

  • Alejandro Heredia

    I’m soaked

  • TheWinGer

    I’m having the same trouble as Pierre, when multiple trigger-buttons in the same page, they show above the modal, also my cd-modal-bg starts slightly to the left from where the trigger is.
    How can I solve this issues?

    • http://www.bakeryallstars.com Pierre

      I’m not as awesome as Caludia so I did a little hack.
      In main.js

      Under
      $(‘[data-type=”modal-trigger”]’).on(‘click’, function(){

      i added
      $(‘[data-type=”modal-trigger”]’).not(this).fadeOut( 800 );

      and under
      $(‘.cd-section .cd-modal-close’).on(‘click’, function(){

      i added
      $(‘[data-type=”modal-trigger”]’).fadeIn( 1200 );

      not perfect but workable.

      Cheers.

      • http://codyhouse.co Claudia Romano

        Thanks for the heads-up guys. I just uploaded a new version! Sorry it took long ;)

    • Iron Barbie

      hey,guys…约吗?

  • Arjan Jassal

    I’ve been trying to think of a way to calculate the right value for ‘scale’ so it fits the viewport perfectly (imagine if you could just do this > scale(100vw, 100vh).

    This is great!

  • TeeNugem

    Claudia, how does this rank in terms of accessibility? Great interaction otherwise :)

  • Guillermo Villa

    Great Cody!!! Is there any way to make it work after contact form has been submited “onclick” to show a “thank you message” just before the mailform.php reaches the mail server? insults are welcome and any help much apreciated :) Sincerely, Gvilla.

    • http://www.freedomdigital.com.br/ Kiko Garcia

      with ajax it can be done :D look this sample: http://pastebin.com/jk0Fu5Gq

      • Guillermo Villa

        I’m testing it ASAP!!! Cheers Kiko and Claudia!!!

  • Kiko Garcia

    hey, great job! I liked it so much I ended up evolving this script. I called it “advanced morphing modal” but it would be better to call “ajax morphing modal”. I want to share this code with you ’cause I have no time to explain better how it works. But think with me: I created a “data-url” attribute on action buttons and created a generic standard to generate the modal in real time and also remove the DOM element on close. This standard just need a actionBtn (the modal-trigger) and a content. So before call a function to open the modal, I call a ajax request to load a response from the “data-url” attribute on actionBtn. Do you get it?
    On this way, all I need to do to create N count of action buttons with different contents is changing the “data-url” content on buttons.

    Maybe you can do it by yourself and help me to share this powerful jQuery script. Congratz! ;D

    • Niki

      Do you have your version available somewhere to download?

      • Kiko Garcia

        we have spoken in but I will put a link if other people want it: https://mega.co.nz/#F!uZoGiBJB!5si9ySrPUL-m2Y5AX-Il-A

        • http://www.bakeryallstars.com Pierre

          Great work! Just woke up and so far I’ve only run the index.html but the buttons won’t work. Maybe I’m too tired? =)

          • http://www.freedomdigital.com.br/ Kiko Garcia

            I don’t know why, can you tell me which browser you use? The effect is OK here, but I only tested in Chrome, Mozilla and IE9 :~

          • http://www.bakeryallstars.com Pierre

            Tried without local server, so that’s probablt it. I suck at server-things, but I’ll figure it out. Thanks. =)

          • http://www.freedomdigital.com.br/ Kiko Garcia

            You’re welcome! If you need help just ask ;)

          • http://www.freedomdigital.com.br/ Kiko Garcia

            hey, wait. Did you tried without a local server?

        • http://www.bakeryallstars.com Pierre

          Hi again Kiko. I’ve got your awesome work up and running, but there’s a few bugs for me. I’ve put three buttons in their own seperate divs and displayed as inline-blocks and that works perfectly. But as soon as I put a header above the morph starts below the buttons and the some modals won’t fill the page. Any suggestions? :)

          • http://www.freedomdigital.com.br/ Kiko Garcia

            can you put your code on pastebin? I think I know what you’re talking about but I’m not sure…

          • http://www.bakeryallstars.com Pierre
          • http://www.freedomdigital.com.br/ Kiko Garcia

            here we go:
            1- For the first step (openModal): the “position:relative” applied to cd-modal-action just give us a wrong position of your button. So I think you can remove it. (style.css, line 145)

            2- For the second step (closeModal): when you open a modal the script append a div .cd-section at the end of . When it occurs your has a wrong height and when you close your modal the effect position isn’t correct because your button isn’t in the same place. To fix it add theses line on morphing_modal_constructor.js at line “125”:

            var actionBtn = $(‘.to-circle’);
            $(‘.cd-modal-bg.is-visible’).css(“top”, actionBtn.offset().top + “px”).css(“left”, actionBtn.offset().left + (actionBtn.width()/2) + “px”);

            but you need to know: when you close your modal your page scroll up (and that’s why this bug is happening). Cya õ

          • http://www.bakeryallstars.com Pierre

            Thanks. The header problem is solved, but the first modal still won’t go fullscreen. I can see the modal-circle in the top right corner. Do you know why?

            I also wanna thank you for helping me. I really appreciate it. :)

          • Guest

            Oh, I found a mistake on Claudia’s code and a logical problem. But look this: http://pastebin.com/f5C3KSEZ

          • http://www.freedomdigital.com.br/ Kiko Garcia

            Oh, I found a mistake on Claudia’s code and a logical problem. But look this:
            http://pastebin.com/h0Y6hKj4 **

    • Guillermo Villa

      Thanks Kiko!

      • http://www.freedomdigital.com.br/ Kiko Garcia

        you’re welcome! ;) (omg, I’m talking like I created all the script haha)

        • Guillermo Villa

          Cheers you guys!!

    • http://codyhouse.co Claudia Romano

      Great job Kiko! ;)

      • http://www.freedomdigital.com.br/ Kiko Garcia

        I think you did the most important hehe

  • http://www.bakeryallstars.com Pierre

    Is there a way to put the button anywhere on the x-axis and still have the morph start where the button is? Or is it better to go with Kikos modified version for that effect? Thanks. :)

    • http://www.freedomdigital.com.br/ Kiko Garcia

      what I did isn’t hard to do but I was focused on a single modal-bg. When you click, the script moves the modal-bg to the current button position.

      I did a website today with more changes on that “advanced morphing modal”: http://www.sercine.com.br/2015/

  • 33andathird.co.uk

    Hi! this is great thankyou! A problem though – when i have 2 or more modals on the page they all overlap eachother, i can see the text of all 3 modals at once. Can you please help me fix this?!

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it! Are you inserting different modals in different sections (.cd-section)?

  • sureshHARDIYA

    Thanks for this wonderful article. It helped. :)

  • ProperLabs

    hey guys, love this modal! got a question with embedding youtube videos. How do you trigger the video to stop upon closing the modal? Thanks! great work.

  • http://www.zingly.hk/ Michael Tse

    Hi! What if we want to have two modal links in one page? How we could do that?
    For example we have two links on footer, one is privacy, one is terms and conditions, two different links for two modal, please help. Many thanks!!!

    • adamhuxtable

      Wanting to do this as well, anyone got any ideas?
      Awesome work btw. Thanks

  • Jo

    Is there any way to link outside of the modal to a certain modal? I am currently using this for some conference speakers, when you click on their image, it fires the modal which holds a bio and some social links. Our client wants to know if they can link to a bio from the schedule that is located on the same page but in a different section. I’m unsure on how to handle this…or if this is even possible since there are no ids to reference.

  • ashiver

    Would it be possible to achieve the effects using jQuery’s animate instead of Velocity?

    • http://codyhouse.co Claudia Romano

      Yes you can, and since they have the same syntax that shouldn’t be too difficult! ;)

      • Iron Barbie

        喂喂喂

    • Elliot Birch

      jquery animate solutions become very choppy on mobile devices. I would use velocity as it uses the CSS3 translate3d function for the animation. This allows the browser to use the graphics card in your device instead of rendering via the browser itself.

  • Iron Barbie

    嘿,哥们儿,你的墨镜不错

  • Iron Barbie

    Hi! What if we want to have two modal links in one page? How we could do that?
    For example we have two links on footer, one is privacy, one is terms and conditions, two different links for two modal, please help. Many thanks!!!

  • David Martins

    I absolutely love this modal, but I need to have three buttons. Is it possible, or am I limited to just one?

    • swizenfeld

      I had the same question, it would be awesome as well if a plug-in was made with a few different options and animations. :)

  • gerardo pacheco

    hello
    Is it possible to add a fixed header in the modal?
    when you scroll within the modal

  • http://www.iosonosempreio.com Tommaso Elli

    Hello, for me it’s broken on Chrome Mobile on my Nexus 5. If I switch to a different browser then it fires and it works pretty well. Did anyone jump into the same issue?

  • ashiver

    Ran into a problem with z-indexes using this modal today. There is an element (let’s call it a “green box”) on the page that is position: relative; and has a z-index value. The modal is further down the page makings its z-index stacking context place it behind the “green box.”

    Since this modal is unlike many other “light boxes” and its background overlay originates at the button instead of being placed first thing in the body it seems like it is impossible to have it reside on top of any relative, absolute, or fixed positioned elements that come before it in the DOM.

    Anyone have a thought on forcing the modal to always appear on top of these positioned elements that proceed it in the DOM?

  • ravul

    Hi, is it possible to display an external file (“readme.txt”) or remote site (http://google.com)?

  • kyaw thein

    Hi, I want to add this modal window to my client site. But I used this site one page scroll plugin. How can I use this modal window over this plugin.

  • Aditya Doshi

    Is there a way to resize the modal box? Such that it does not cover the full height and width of the screen ?

  • Dehnise Kotsop

    loved it!

  • ashiver

    Anyone run into some strange behavior on mobile devices (in my case the iPhone) when the phone is in the landscape position? Sometimes the button shrinks down but takes upwards of 5-10 seconds for the modal to appear. Sometimes it doesn’t appear at all, but the content of the modal appears. Very odd stuff.