Today, walking around the Internet, I came across an interesting implementation of a full-screen modal window that was created using the SVG and JS elements, and I could not resist not sharing a beautiful animated pop-up window with you.
This is a very simple but at the same time unusually beautiful modal window, while SVG graphics are currently rapidly gaining momentum among web developers, a modal window with an animated background using modern technologies that now allow you to create a ready-made website for any website or online store amazing effects. Plus there is full support for IE9 +.
We have been experimenting with SVG animation for a long time, and today in this article, using the example of creating a modern pop-up window, we will tell you how to animate several SVG paths at once and make an amazingly stylish background effect for a modal window.
Why do you need a modal window script, you ask? - Well then! You have probably seen more than once how these windows are used on different sites, someone uses modern pop-up windows to accept an application for any order on the site, someone uses a modal window to hide some bulky content that will be opened by clicking a button , some use the pop-up module in order to provide the user with some important information, the general purpose of using modal windows for each site is different, but they are very popular on almost any site.
I already wrote a lot of articles on the topic of pop-ups with some you can find on our site here our site here , but today we will explore a completely new approach to creating a modal window that will also open by the click of a button and will completely hide the background of the site, thereby fully focusing the user's attention on the provided him information, while the modal window has a beautiful smooth anima tion.
As always, you can download the finished modal window on our website under this article, there you can see our example of a modal window with an animated background, which we will now study. Well then, let's step back from theory and get down to practice, create a modern modal window for your site.
The first step with which we will begin to create a pop-up window is to use HTML markup, which has a very simple structure and consists of two main elements <section>, action to wrap the button itself #modal-trigger, block div.cd-modal that is, the modal window itself, the content block .cd-modal-content modal window, well and the last one is div.cd-svg-bg, which will create the effect of covering the background.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<main class="cd-main-content"> <section class="center"> <h1>SVG modal window</h1> <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Modal window button</a> </section> </main> <!-- .cd-main-content --> <div class="cd-modal" data-modal="modal-trigger"> <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z"> <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500"> <title>SVG Modal background</title> <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/> <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/> <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/> </svg> </div> <div class="cd-modal-content"> <!-- modal content here --> </div> <!-- cd-modal-content --> <a href="#0" class="modal-close">Close</a> </div> <!-- cd-modal --> <div class="cd-cover-layer"></div> <!-- .cd-cover-layer --> |
Our next step is to add styles to our window, the original value in .cd-modal visibility: hidden; position: fixed; height: 100%; and width: 100%;, and when the modal window button is called, that is, when you click on a # modal-trigger, the visibility of the window changes from hidden to visible .modal-is-visible.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.cd-modal { position: fixed; z-index: 2; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; transition: visibility 0s 0.6s; } .cd-modal.modal-is-visible { visibility: visible; transition: visibility 0s 0s; } .cd-cover-layer { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #f2f2f2; visibility: hidden; opacity: 0; transition: opacity 0.3s 0.3s, visibility 0s 0.6s; } .cd-cover-layer.modal-is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-modal-content { color: #f2f2f2; opacity: 0; transform: translateY(50px); transition: opacity 0.3s 0s, transform 0.3s 0s; } .modal-is-visible .cd-modal-content { opacity: 1; transform: translateY(0); transition: opacity 0.3s 0.3s, transform 0.3s 0.3s; } |
Weβve finished the styles, now the last point remains: we need to connect the JS handler so that our pop-up window works.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
modalTrigger.on('click', function(event){ //modalTrigger = $('a[data-type="cd-modal-trigger"]') event.preventDefault(); $([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer') animateModal(pathsArray, pathSteps, duration, 'open'); }); function animateModal(paths, pathSteps, duration, animationType) { var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1)); path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2], path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4]; paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1') paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2') paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3') } |
That's all, we have created an example of a beautiful form of a pop-up window and now you can successfully connect a modal window to your website. What else can I say here, use your health, and I will be glad if someone likes this implementation of the pop-up window.
You can also download the finished full-screen modal window below.
No Comment
You can post first response comment.