September 22, 2015 | 34 Feedbacks

SVG Modal Window

A simple modal window with an animated SVG background.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

We’ve been experimenting lately with SVG path animations, creating transitions for our image slider and hero slider. Today’s tutorial shows you how to animate at once multiple SVG paths to create a stylish background effect for a modal window.

Inspiration: UI8 Nav on Dribbble

Creating the structure

The HTML structure is composed by 2 main elements: a <section>, used to wrap the action button (#modal-trigger), and a, the modal window, containing the modal content (.cd-modal-content) and the, used to create the background covering effect.

An additional has been used to cover the main content when the modal window is fired (it is positioned between the modal window and the main content of the page).

Adding style

The .cd-modal window has, initially, visibility: hidden, height: 100% and width: 100% and is in fixed position.
When user clicks the a#modal-trigger, the visibility of the modal window is changed to visible (using the .modal-is-visible class).

To create the modal background covering effect, we animate the ‘d’ attribute of the <path> elements inside the > svg (more in the Events handling section).

Our first approach to creating the “masked” text effect consisted in using the SVG foreignObject to include the modal content into the SVG element. This way we could use the path elements as a reference to cut the text outside the animated background. However, we had several issues, mostly related to browsers compatibility.

That’s why we decided to use this simple trick instead: when the modal window is fired, a layer (.cd-cover-layer) becomes visible, right below the modal background, and, immediately after, the text becomes visible as well. The .cd-cover-layer and the text have the same color, this way only the text over the blue paths is visible during the animation.

More in details: when a user clicks the a#modal-trigger, the .modal-is-visible class is added to the .cd-cover-layer and the .cd-modal. This class changes the .cd-cover-layer opacity from 0 to 1 and its visibility from hidden to visible, so that the .cd-cover-layer entirely covers the page main content.

As soon as the .cd-cover-layer opacity transition is over, the opacity of the .cd-modal-content is set to 1:

Since the color of the .cd-modal-content is the same of the .cd-cover-layer background color, the only visible content will be the one over the blue svg background (which is still animating), while the one over the .cd-cover-layer won’t be visible.

Events handling

To animate the modal background, we animated the 'd' attribute of the  3 <path> elements inside the svg.
First, we defined the two steps of our animation, using the same process described in the Animated SVG Hero Slider article (Events handling section).

Once defined the paths, we added to the .cd-svg-bg a data-stepn attribute (one for each step) equal to the 'd' attribute of the defined path (to easily retrieve it with JavaScript).

We then used the animate() method provided by Snap.svg to animate the path element.


Sep 22, 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.

  • Pau

    Cool!! :)

  • TheVirusKA

    Wow thats cool!

  • Arbusto

    Thanks for this awesome and beautiful tutorial! I have one question if you don’t mind, how can I add more than one SVG modal window on a same page without duplicating all the code (which parts need to be modified)?

    I been able to add it without any problem but can’t add more than one without having conflict.

    Thanks again!

  • Pallab Pain

    This is neat. Thank you! :)

  • Vivek Shetye

    hey i want to give multiple modal windows on one page how can i do that… basically i want to know how you are refering which modal content to fire by the button click…

  • Nicholas Johnson

    Great Code! I too would like the ability to add two or more modals on a page. I can get it to work, but the animation only works on one of them. Any help would be appreciated.

    • Claudia Romano

      as @haneedesigns:disqus suggested, you can create two different modal windows, and set the data-modal attribute equal to the trigger button id. @disqus_0n4GfTndQX:disqus @vivekshetye:disqus

      • Arbusto

        Thanks so much @claudiarrromano:disqus! One last question, how can I prevent the background document from scrolling on iOS? I used an ‘overflow: hidden’ for the body when opening it and it’s working fine on most places but not on iOS.

        Thanks so much again!

        • Mauritius D’Silva

          @disqus_0n4GfTndQX:disqus @disqus_Dc0R3ZlooW:disqus You need to change the SVG path IDs for the animation to show up.

          For example the first modal uses:
          “path id=”cd-changing-path-1″
          “path id=”cd-changing-path-2″
          “path id=”cd-changing-path-3″
          for the second and subsequent modals change these path IDs to some unique ones.


          • Arbusto

            Thanks so much Mauritius D’Silva!

            Sorry to bother you again but do you know how can I prevent the background document from scrolling on iOS? I used an ‘overflow: hidden’ for the body when opening it and it’s working fine on most browsers but not on iOS.

          • Humbert

            Worked for me too, thanks.

          • To Be

            well done you rescued me ^_^

      • To Be

        just the first one works !!

  • Rogier Strobbe

    Nice one!

    Same question for me though.. I’d lke to have 2 modal windows on a single page.. How do I do that?

    • soulstatic

      You can create two different IDs to trigger different modals. (Ex. “id=”trigger-modal-one”)

      • To Be

        not working.!!

        • soulstatic

          You need to change the data modal to match the ID. data-modal=”modal-trigger”>

          • Rabii Brahimi

            Do you mean we need to change Data-type to match the sames ID EX data-type =”trigger-modal-one” based on your example !!!!

  • Mohammad Walid

    Awesome article,,,, thanks for Google now to bring me her ;)

  • Nikolay Talanov

    This demo have some serious problems with performance. Chrome timeline showing me that it’s running on 10 fps.

    • Claudia Romano

      Hi Nikolay, that’s strange. How did you find this result? We checked the performance and it was ok (I’ve attached a screenshot – it’s over 60fps). Anyway, we’ll look into this. Cheers!

      • Nikolay Talanov

        Chrome 45 Win 7. Same result always.

        • Norbert Fehér

          Windows Phone 8.1 with internet explorer 11 mobile : 45 fps

  • Alex Tapper

    Awesome! Can you have the modal window trigger on load—then close it with the button??

    • Arbusto

      Hi Alex, not sure if I completely know what you’re searching for but this should do the trick:

      $(‘#modal-trigger–project-one’).trigger(‘click’); //Replace with the ID of the modal you want to show

      Don’t forget to put the code before the closing , if not use $(document).ready(function(){});

      Is this what you’re looking for or you also need it to appear opened (without the animation)?

      Sorry if misunderstood.

  • Mansoor

    Can you have the modal windows, then please give the code

  • Mansoor

    sorry, Can you have the multiple modal windows, then please give the code

  • sergi

    @[email protected]:disqus Hi claudia, i’m loading data in this modal with ajax and it’s performance is very bad :D so i think it would be good to add loader while ajax data is wholly downloaded and then fire the modal and can you help me? :D

  • Keumi

    Hi, someone has an idea to allow scrolling in the cd-modal-content? When cd-modal-content is open, I have to click first on the window to be able to scroll down (Windows, Chrome). Thanks.

  • Axell Gun

    How to make it auto load when page load?

  • Kabwe Kasoma

    Nice one

  • Zev

    Hi Claudia, how would one go about opening the model window from a separate JS file? I can’t seem to find what I would need to call.

  • Rabii Brahimi

    Awesome work :)
    Can i use the modal in different places on the website ? on each click the modal would show with different info !!!!

  • Iazel

    Nice work, but I can’t really understand why do you need the cover-layer, considering that the general background is already of the same color of the text. Could you please explain it more thoughtfully? Thanks!