Full Screen Greetings Modal Popup
Updated on 15 May
Hi today in this article I am going to share with you full screen greetings modal popup which will show up greetings to your visitors.
That sounds good showing greetings to your visitors? That's amazing you just have a look on this modal popup you can see the demo by clicking the download link provided below you will be redirected to the demo page where you can also download the project files.
This is full screen modal popup when you click on a Button a popup modal will be shown on your website.
This is very beautiful and attractive modal popup but one thing is very bad in it its not responsive. Which means that you can only use this modal popup on computer devices if you show this modal popup on mobile devices then you will not see complete modal popup.
Now leave everything and let me share the source code of this full screen greetings modal popup with you.
Demo/Preview of Full Screen Greetings Modal Popup:
This is the snapped preview of Full Screen Greetings Modal Popup.How are you buddy today we are going to make Full Screen Greetings Modal Popup
As you know the HTML markup is essential for that so we should have some HTML markup first. Below is the HTML markup.
The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files only if there is any error with the working of code.
There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
HTML markup for Full Screen Greetings Modal Popup :
<div class='modalpopupfullscreen'>
<!-- /mixins -->
<div class="intro-circle"></div>
<div class="intro-circle second"></div>
<div class="intro-circle third"></div>
<!-- img(src='/assets/svg/Logo.svg', alt='Logo').logo-->
<div class="wave-long-wrapper">
<div class="wave-long-line left">
<svg viewBox="0 0 751.5 25">
<defs>
<style>.wave-bottom{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:9px;}</style>
</defs>
<path class="wave-bottom" d="M344.1,803c14.3,0,14.3,16,28.6,16s14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16" transform="translate(-339.6 -798.5)"></path>
</svg>
</div>
<div class="wave-long-line right">
<svg viewBox="0 0 751.5 25">
<defs>
<style>.wave-bottom{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:9px;}</style>
</defs>
<path class="wave-bottom" d="M344.1,803c14.3,0,14.3,16,28.6,16s14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16,14.3,16,28.6,16,14.3-16,28.6-16" transform="translate(-339.6 -798.5)"></path>
</svg>
</div>
</div><!-- scoreboard -->
<div class="scoreboard-wrapper">
<div class="scoreboard-content">
<h1 class="scoreboard-title">This is amazing !</h1>
<h2 class="scoreboard-score"><span>1</span><span>2</span><span class="space"></span><span>3</span><span>0</span><span>0</span><span class="space"></span><small class="points">points</small></h2>
<div class="share-buttons">
<button class="button facebook-btn" onclick="share('facebook')">
<!-- img(src='/assets/svg/facebook-square.svg', alt='Facebook')-->
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1376 128q119 0 203.5 84.5t84.5 203.5v960q0 119-84.5 203.5t-203.5 84.5h-188v-595h199l30-232h-229v-148q0-56 23.5-84t91.5-28l122-1v-207q-63-9-178-9-136 0-217.5 80t-81.5 226v171h-200v232h200v595h-532q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960z" fill="#4563A4"></path>
</svg>Share on Facebook
</button>
<button class="button twitter-btn" onclick="share('twitter')">
<!-- img(src='/assets/svg/twitter-square.svg', alt='Twitter')-->
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1408 610q-56 25-121 34 68-40 93-117-65 38-134 51-61-66-153-66-87 0-148.5 61.5t-61.5 148.5q0 29 5 48-129-7-242-65t-192-155q-29 50-29 106 0 114 91 175-47-1-100-26v2q0 75 50 133.5t123 72.5q-29 8-51 8-13 0-39-4 21 63 74.5 104t121.5 42q-116 90-261 90-26 0-50-3 148 94 322 94 112 0 210-35.5t168-95 120.5-137 75-162 24.5-168.5q0-18-1-27 63-45 105-109zm256-194v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z" fill="#3FC5FB"></path>
</svg>Share on Twitter
</button>
</div>
</div>
<div class="scoreboard-bg"></div>
</div><!-- /scoreboard -->
<!-- fireworks -->
<div class="fireworks-wrapper">
<!-- Left-->
<div class="firework left wave yellow">
<svg viewBox="0 0 27 128">
<path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="8" d="M2.27373675e-13,119.1 C2.27373675e-13,109.3 18,109.4 18.1,99.5 C18.2,89.6 0.1,89.6 0.2,79.7 C0.3,69.8 18.2,70 18.3,60.1 C18.4,50.2 0.3,50.2 0.4,40.3 C0.5,30.4 18.4,30.5 18.5,20.7 C18.6,10.9 0.5,10.8 0.6,0.9" transform="translate(4 4)"></path>
</svg>
</div>
<div class="firework left wave yellow large">
<svg viewBox="56 94 26 264">
<path d="M61.2 353.9c-.1-10.6 15.9-10.7 15.9-21.3 0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2" stroke="#FFF" stroke-width="8" fill="none" stroke-linecap="round"></path>
</svg>
</div>
<div class="firework left wave cyan">
<svg viewBox="0 0 27 128">
<path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="8" d="M2.27373675e-13,119.1 C2.27373675e-13,109.3 18,109.4 18.1,99.5 C18.2,89.6 0.1,89.6 0.2,79.7 C0.3,69.8 18.2,70 18.3,60.1 C18.4,50.2 0.3,50.2 0.4,40.3 C0.5,30.4 18.4,30.5 18.5,20.7 C18.6,10.9 0.5,10.8 0.6,0.9" transform="translate(4 4)"></path>
</svg>
</div>
<div class="firework left figure hex">
<svg viewBox="285 -12 30 27">
<path d="M291.5 11.8l-4.9-8.4c-.82-1.42-.82-3.18 0-4.6l4.9-8.4c.82-1.43 2.35-2.3 4-2.3h9.8c1.65 0 3.18.87 4 2.3l4.9 8.4c.82 1.42.82 3.18 0 4.6l-4.9 8.4c-.82 1.43-2.35 2.3-4 2.3h-9.8c-1.65 0-3.18-.87-4-2.3z" fill="#FFF"></path>
</svg>
</div>
<div class="firework left figure square">
<svg viewBox="366 -10 25 25">
<rect width="25" height="24.98" rx="5.4" fill="#FFF" transform="translate(366 -10)"></rect>
</svg>
</div>
<!-- Right-->
<div class="firework right wave white">
<svg viewBox="0 0 27 128">
<path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="8" d="M2.27373675e-13,119.1 C2.27373675e-13,109.3 18,109.4 18.1,99.5 C18.2,89.6 0.1,89.6 0.2,79.7 C0.3,69.8 18.2,70 18.3,60.1 C18.4,50.2 0.3,50.2 0.4,40.3 C0.5,30.4 18.4,30.5 18.5,20.7 C18.6,10.9 0.5,10.8 0.6,0.9" transform="translate(4 4)"></path>
</svg>
</div>
<div class="firework right wave cyan">
<svg viewBox="0 0 27 128">
<path fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="8" d="M2.27373675e-13,119.1 C2.27373675e-13,109.3 18,109.4 18.1,99.5 C18.2,89.6 0.1,89.6 0.2,79.7 C0.3,69.8 18.2,70 18.3,60.1 C18.4,50.2 0.3,50.2 0.4,40.3 C0.5,30.4 18.4,30.5 18.5,20.7 C18.6,10.9 0.5,10.8 0.6,0.9" transform="translate(4 4)"></path>
</svg>
</div>
<div class="firework right wave yellow large">
<svg viewBox="56 94 26 264">
<path d="M61.2 353.9c-.1-10.6 15.9-10.7 15.9-21.3 0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2s15.9-10.7 15.9-21.3c0-10.6-16.1-10.5-16.1-21.2" stroke="#FFF" stroke-width="8" fill="none" stroke-linecap="round"></path>
</svg>
</div>
<div class="firework right figure triangle">
<svg viewBox="443 -9 26 24">
<path d="M452.3-7c.74-1.22 2.07-1.96 3.5-1.96 1.43 0 2.76.74 3.5 1.96l4.4 7.5 4.4 7.5c.7 1.26.7 2.8-.02 4.04-.72 1.25-2.04 2.03-3.48 2.06h-17.5c-1.44-.03-2.76-.8-3.48-2.06-.7-1.25-.72-2.78-.02-4.04L448 .5l4.3-7.5z" fill="#6cf0f2"></path>
</svg>
</div>
<div class="firework right figure plus">
<svg viewBox="212 -16 34 34">
<path d="M228.9-12v25.9M216 .9h25.9" stroke="#FFF" stroke-width="8" fill="none" stroke-linecap="round"></path>
</svg>
</div>
<!-- Dotted lines-->
<div class="firework line top">
<svg viewBox="289 515 290 298">
<path d="M291.1 810s27.7-55.57 142.94-170.9C549.3 523.77 577 517 577 517" stroke="#FFF" stroke-width="5" stroke-dasharray="5 31" fill="none"></path>
</svg>
</div>
<div class="firework line left">
<svg viewBox="289 515 290 298">
<path d="M291.1 810s27.7-55.57 142.94-170.9C549.3 523.77 577 517 577 517" stroke="#FFF" stroke-width="5" stroke-dasharray="5 31" fill="none"></path>
</svg>
</div>
<div class="firework line bottom">
<svg viewBox="289 515 290 298">
<path d="M291.1 810s27.7-55.57 142.94-170.9C549.3 523.77 577 517 577 517" stroke="#FFF" stroke-width="5" stroke-dasharray="5 31" fill="none"></path>
</svg>
</div>
</div><!-- /fireworks -->
<div class="close-btn-wrapper">
<div class="close-btn"><span>+</span></div>
</div>
</div>
<button id="myBtn">Open Modal</button>| Attribute | Belongs to | Description |
|---|---|---|
| alt | <area>, <img>, <input> | Specifies an alternate text when the original element fails to display |
| charset | <meta>, <script> | Specifies the character encoding |
| class | Global Attributes | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Specifies the name of the form the element belongs to |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Specifies the height of the element |
| href | <a>, <area>, <base>, <link> | Specifies the URL of the page the link goes to |
| id | Global Attributes | Specifies a unique id for an element |
| lang | Global Attributes | Specifies the language of the element's content |
| onclick | All visible elements. | Script to be run when the element is being clicked |
| rel | <a>, <area>, <link> | Specifies the relationship between the current document and the linked document |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | Specifies the URL of the media file |
| type | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> | Specifies the type of element |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Specifies the width of the element |
This was our HTML markup you can see that I have used svg embedded code in above markup you can also create a separate svg files but I recommend you not to do that.
Without CSS our this script (Full Screen Greetings Modal Popup) will never look appealing. So here we are, our HTML markup is ready now we have to customize our HTML markup and it can only be done using CSS.
So this is the CSS code which i have written and we will use this to customize Full Screen Greetings Modal Popup you can copy it by clicking on the code and code will be automatically copied to clipboard.
CSS Code for Full Screen Greetings Modal Popup :
.modalpopupfullscreen {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.logo,
.wave-long-wrapper,
.scoreboard-wrapper,
.scoreboard-bg,
.fireworks-wrapper,
.close-btn-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.intro-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-animation: clipReveal 3s 0.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
animation: clipReveal 3s 0.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
background: #55ccf5;
z-index: 0;
will-change: clip-path;
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%);
}
.intro-circle.second {
background: #41abf7;
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
z-index: 1;
}
.intro-circle.third {
background: linear-gradient(to bottom, #2f77f2, #55a1fb);
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
z-index: 2;
}
.logo {
fill: #333;
z-index: 4;
width: 10rem;
-webkit-animation: fadeIn 1s 0.5s both ease, slideUpLogo 1s 1.5s forwards cubic-bezier(0.77, 0, 0.175, 1);
animation: fadeIn 1s 0.5s both ease, slideUpLogo 1s 1.5s forwards cubic-bezier(0.77, 0, 0.175, 1);
}
.wave-long-wrapper {
z-index: 9;
width: 30rem;
height: 0;
-webkit-transform: translateY(12rem);
transform: translateY(12rem);
}
.wave-long-line {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.wave-long-line.left {
-webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.wave-long-line.left svg {
stroke-dashoffset: -442.5;
}
.wave-long-line.right {
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.wave-long-line.right svg {
stroke-dashoffset: 442.5;
}
.wave-long-line svg {
-webkit-animation: waveReveal 1s 0.7s forwards ease;
animation: waveReveal 1s 0.7s forwards ease;
width: 100%;
stroke-dasharray: 885;
}
.scoreboard-wrapper {
width: 32.5rem;
height: 15.5rem;
-webkit-transform: translateY(1.6rem);
transform: translateY(1.6rem);
z-index: 99999;
}
.scoreboard-bg {
width: 2rem;
height: 2rem;
opacity: 0;
background: #fafafa;
border: 0.4rem solid #61ccff;
box-shadow: 0 0 1.4rem rgba(0,0,0,0.2);
border-radius: 1.2rem;
will-change: width, height;
-webkit-animation: sbExpandY 0.45s 2s forwards ease, sbExpandX 0.4s 2.3s forwards ease, sbOpacity 0.1s 2s forwards ease;
animation: sbExpandY 0.45s 2s forwards ease, sbExpandX 0.4s 2.3s forwards ease, sbOpacity 0.1s 2s forwards ease;
}
.scoreboard-content {
position: relative;
display: flex;
flex-direction: column;
z-index: 6;
width: 100%;
height: 100%;
}
.scoreboard-title {
font-family: 'Rubik';
font-weight: 400;
display: block;
font-size: 2.5rem;
color: #ffc125;
margin: auto;
margin-top: 2.4rem;
-webkit-animation: slideInText 0.8s 2.3s both ease;
animation: slideInText 0.8s 2.3s both ease;
}
.scoreboard-score {
font-family: 'Rubik';
color: #476ff6;
font-weight: 400;
font-size: 3rem;
margin: auto;
}
.scoreboard-score span {
display: inline-block;
width: 0.8ch;
}
.scoreboard-score > *:not(.space) {
width: 1ch;
-webkit-animation: slideInText 0.5s both ease;
animation: slideInText 0.5s both ease;
}
.scoreboard-score .points {
font-size: 1.4rem;
display: inline-block;
-webkit-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.scoreboard-score span:not(.space):nth-child(1) {
-webkit-animation-delay: 2.35s;
animation-delay: 2.35s;
}
.scoreboard-score span:not(.space):nth-child(2) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.scoreboard-score span:not(.space):nth-child(3) {
-webkit-animation-delay: 2.45s;
animation-delay: 2.45s;
}
.scoreboard-score span:not(.space):nth-child(4) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.scoreboard-score span:not(.space):nth-child(5) {
-webkit-animation-delay: 2.55s;
animation-delay: 2.55s;
}
.scoreboard-score span:not(.space):nth-child(6) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
}
.share-buttons {
display: flex;
width: 80%;
margin: 0 auto 1.8rem auto;
}
.share-buttons .button {
font-family: 'Roboto Slab';
font-weight: 500;
font-size: 0.7rem;
background: #fff;
margin: 0 1rem;
height: 2.4rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0.2rem 0.2rem 0.4rem rgba(0,0,0,0.05);
border-radius: 3px;
border: none;
color: #cacaca;
-webkit-animation: slideInText 0.5s both ease;
animation: slideInText 0.5s both ease;
cursor:pointer;
}
.share-buttons .button img,
.share-buttons .button svg {
width: 1.4rem;
height: 1.4rem;
}
.share-buttons .facebook-btn {
-webkit-animation-delay: 2.85s;
animation-delay: 2.85s;
}
.share-buttons .twitter-btn {
-webkit-animation-delay: 2.9s;
animation-delay: 2.9s;
}
.fireworks-wrapper {
width: 32.5rem;
height: 15.5rem;
z-index: 5;
}
.paused svg path {
-webkit-animation: none !important;
animation: none !important;
stroke-dashoffset: 0 !important;
}
.firework {
width: 1rem;
position: absolute;
}
.firework.yellow svg path {
stroke: #ffc125;
}
.firework.yellow:nth-child(1) {
-webkit-transform: rotate(-45deg) translateY(-4rem);
transform: rotate(-45deg) translateY(-4rem);
}
.firework.yellow:nth-child(2) {
-webkit-transform: rotate(-95deg) translateX(-4rem) translateY(-4rem);
transform: rotate(-95deg) translateX(-4rem) translateY(-4rem);
}
.firework.yellow:nth-child(2) svg path {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.firework.cyan {
-webkit-transform: rotate(-100deg) translateX(-8rem) translateY(-5rem);
transform: rotate(-100deg) translateX(-8rem) translateY(-5rem);
}
.firework.cyan svg path {
stroke: #6cf0f2;
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.firework.left {
left: 0;
}
.firework.right {
right: 0;
}
.firework.right.white {
-webkit-transform: rotate(45deg) translateY(-2rem) translateX(-5.5rem);
transform: rotate(45deg) translateY(-2rem) translateX(-5.5rem);
}
.firework.right.white svg path {
stroke: #fff;
}
.firework.right.cyan {
-webkit-transform: rotate(45deg) translateY(-4rem);
transform: rotate(45deg) translateY(-4rem);
}
.firework.right.yellow {
-webkit-transform: rotate(115deg) translateY(-5rem) translateX(7rem);
transform: rotate(115deg) translateY(-5rem) translateX(7rem);
}
.firework.figure {
opacity: 0;
-webkit-animation: hex 0.5s 2.5s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
animation: hex 0.5s 2.5s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}
.firework.figure svg {
-webkit-animation: none;
animation: none;
}
.firework.figure.hex {
-webkit-animation-name: hex;
animation-name: hex;
}
.firework.figure.square {
-webkit-animation-name: square;
animation-name: square;
bottom: 0;
}
.firework.figure.triangle {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
-webkit-animation-name: triangle;
animation-name: triangle;
}
.firework.figure.plus {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
-webkit-animation-name: plus;
animation-name: plus;
}
.firework.wave svg {
-webkit-animation: translateWaveWrapper 1.7s 1.9s forwards ease;
animation: translateWaveWrapper 1.7s 1.9s forwards ease;
}
.firework.wave svg path {
stroke-dasharray: 170;
stroke-dashoffset: 170;
-webkit-animation: dashOffset 1.7s 1.5s forwards ease;
animation: dashOffset 1.7s 1.5s forwards ease;
}
.firework.wave.large svg path {
-webkit-animation: dashOffsetLarge 1.7s 1.5s forwards ease;
animation: dashOffsetLarge 1.7s 1.5s forwards ease;
stroke-dasharray: 335;
stroke-dashoffset: 335;
}
.firework.line {
width: 9rem;
overflow: hidden;
opacity: 0;
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
-webkit-animation: dottedLineClip 1s 2.3s forwards ease;
animation: dottedLineClip 1s 2.3s forwards ease;
}
.firework.line svg {
-webkit-transform-origin: 400% 400%;
transform-origin: 400% 400%;
-webkit-animation: dottedLineOutro 2s 2.6s forwards ease;
animation: dottedLineOutro 2s 2.6s forwards ease;
}
.firework.line.top {
top: -8rem;
right: -5rem;
}
.firework.line.left {
top: 0;
bottom: 0;
left: -10rem;
-webkit-transform: rotateY(180deg) rotateZ(35deg);
transform: rotateY(180deg) rotateZ(35deg);
}
.firework.line.bottom {
top: 130%;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(-35deg);
transform: rotateY(180deg) rotateX(180deg) rotateZ(-35deg);
}
@-webkit-keyframes hex {
0% {
opacity: 1;
-webkit-transform: translateX(8rem) translateY(0) scale(2) rotateZ(45deg);
transform: translateX(8rem) translateY(0) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(0) translateY(-10rem) scale(0.8);
transform: translateX(0) translateY(-10rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes hex {
0% {
opacity: 1;
-webkit-transform: translateX(8rem) translateY(0) scale(2) rotateZ(45deg);
transform: translateX(8rem) translateY(0) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(0) translateY(-10rem) scale(0.8);
transform: translateX(0) translateY(-10rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes square {
0% {
opacity: 1;
-webkit-transform: translateX(-1rem) translateY(1rem) scale(2) rotateZ(45deg);
transform: translateX(-1rem) translateY(1rem) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(-5rem) translateY(4rem) scale(0.8);
transform: translateX(-5rem) translateY(4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes square {
0% {
opacity: 1;
-webkit-transform: translateX(-1rem) translateY(1rem) scale(2) rotateZ(45deg);
transform: translateX(-1rem) translateY(1rem) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(-5rem) translateY(4rem) scale(0.8);
transform: translateX(-5rem) translateY(4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes triangle {
0% {
opacity: 1;
-webkit-transform: translateX(2rem) translateY(0) scale(2) rotateZ(45deg);
transform: translateX(2rem) translateY(0) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(8rem) translateY(-4rem) scale(0.8);
transform: translateX(8rem) translateY(-4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes triangle {
0% {
opacity: 1;
-webkit-transform: translateX(2rem) translateY(0) scale(2) rotateZ(45deg);
transform: translateX(2rem) translateY(0) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(8rem) translateY(-4rem) scale(0.8);
transform: translateX(8rem) translateY(-4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes plus {
0% {
opacity: 1;
-webkit-transform: translateX(2rem) translateY(8rem) scale(2) rotateZ(45deg);
transform: translateX(2rem) translateY(8rem) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(8rem) translateY(4rem) scale(0.8);
transform: translateX(8rem) translateY(4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes plus {
0% {
opacity: 1;
-webkit-transform: translateX(2rem) translateY(8rem) scale(2) rotateZ(45deg);
transform: translateX(2rem) translateY(8rem) scale(2) rotateZ(45deg);
}
99% {
-webkit-transform: translateX(8rem) translateY(4rem) scale(0.8);
transform: translateX(8rem) translateY(4rem) scale(0.8);
opacity: 1;
}
100% {
opacity: 0;
}
}
.close-btn-wrapper {
top: auto;
bottom: 1rem;
z-index: 9;
width: 2rem;
height: 2rem;
-webkit-animation: closeTranslate 0.5s 4s forwards linear;
animation: closeTranslate 0.5s 4s forwards linear;
}
.close-btn {
position: relative;
background: #fff;
box-shadow: 0 0.2rem 1rem rgba(0,0,0,0.2);
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
-webkit-animation: closeJump 0.4s 4s both ease, closeBounce 0.4s 4.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: closeJump 0.4s 4s both ease, closeBounce 0.4s 4.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.close-btn span {
-webkit-animation: closeRotateScaleIn 0.4s 4s both ease;
animation: closeRotateScaleIn 0.4s 4s both ease;
color: #537df3;
font-size: 2rem;
cursor: pointer;
margin-top: -0.25rem;
margin-left: 0.58rem;
}
@-webkit-keyframes clipReveal {
from {
-webkit-clip-path: circle(4vh at 50% 50%);
clip-path: circle(4vh at 50% 50%);
}
to {
-webkit-clip-path: circle(100% at 50% 50%);
clip-path: circle(100% at 50% 50%);
}
}
@keyframes clipReveal {
from {
-webkit-clip-path: circle(4vh at 50% 50%);
clip-path: circle(4vh at 50% 50%);
}
to {
-webkit-clip-path: circle(100% at 50% 50%);
clip-path: circle(100% at 50% 50%);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes slideUpLogo {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-13.5rem);
transform: translateY(-13.5rem);
}
}
@keyframes slideUpLogo {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-13.5rem);
transform: translateY(-13.5rem);
}
}
@-webkit-keyframes waveReveal {
to {
stroke-dashoffset: 0;
}
}
@keyframes waveReveal {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes sbExpandY {
to {
height: 100%;
}
}
@keyframes sbExpandY {
to {
height: 100%;
}
}
@-webkit-keyframes sbExpandX {
to {
width: 100%;
}
}
@keyframes sbExpandX {
to {
width: 100%;
}
}
@-webkit-keyframes sbOpacity {
to {
opacity: 1;
}
}
@keyframes sbOpacity {
to {
opacity: 1;
}
}
@-webkit-keyframes slideInText {
from {
-webkit-transform: translateY(50%);
transform: translateY(50%);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInText {
from {
-webkit-transform: translateY(50%);
transform: translateY(50%);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes dottedLineOutro {
to {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
}
@keyframes dottedLineOutro {
to {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
}
@-webkit-keyframes dottedLineClip {
1% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes dottedLineClip {
1% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@-webkit-keyframes translateWaveWrapper {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
}
@keyframes translateWaveWrapper {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
}
@-webkit-keyframes dashOffset {
50% {
stroke-dashoffset: 170;
}
100% {
stroke-dashoffset: -170;
}
}
@keyframes dashOffset {
50% {
stroke-dashoffset: 170;
}
100% {
stroke-dashoffset: -170;
}
}
@-webkit-keyframes dashOffsetLarge {
50% {
stroke-dashoffset: 335;
}
100% {
stroke-dashoffset: -335;
}
}
@keyframes dashOffsetLarge {
50% {
stroke-dashoffset: 335;
}
100% {
stroke-dashoffset: -335;
}
}
@-webkit-keyframes closeTranslate {
from {
-webkit-transform: translateX(-4rem);
transform: translateX(-4rem);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes closeTranslate {
from {
-webkit-transform: translateX(-4rem);
transform: translateX(-4rem);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes closeBounce {
from {
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
to {
-webkit-transform: translateY(-2rem);
transform: translateY(-2rem);
}
}
@keyframes closeBounce {
from {
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
to {
-webkit-transform: translateY(-2rem);
transform: translateY(-2rem);
}
}
@-webkit-keyframes closeJump {
from {
-webkit-transform: translateY(4rem) scale(0.8);
transform: translateY(4rem) scale(0.8);
}
to {
-webkit-transform: translateY(-4rem) scale(1);
transform: translateY(-4rem) scale(1);
}
}
@keyframes closeJump {
from {
-webkit-transform: translateY(4rem) scale(0.8);
transform: translateY(4rem) scale(0.8);
}
to {
-webkit-transform: translateY(-4rem) scale(1);
transform: translateY(-4rem) scale(1);
}
}
@-webkit-keyframes closeRotateScaleIn {
from {
-webkit-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
to {
-webkit-transform: scale(1) rotateZ(45deg);
transform: scale(1) rotateZ(45deg);
}
}
@keyframes closeRotateScaleIn {
from {
-webkit-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
to {
-webkit-transform: scale(1) rotateZ(45deg);
transform: scale(1) rotateZ(45deg);
}
}
In the code provided above i have set the opacity of this modal popup is 100% you can change that opacity by simply changing the color code to RGBA and set the opacity of background of modal popup.
I've tried that but it was not looking beautiful that's why I removed that if you want to change opacity you can.
So we have written HTML markup and customised it using CSS and now we will add some functionality in this project (Full Screen Greetings Modal Popup) to make it work as we want it to be.
To make this project (Full Screen Greetings Modal Popup) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.
This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.
JavaScript Code for Full Screen Greetings Modal Popup :
/** Modal Code **/
var modal=document.getElementsByClassName("modalpopupfullscreen")[0],btn=document.getElementById("myBtn"),span=document.getElementsByClassName("close-btn")[0];btn.onclick=function(){modal.style.display="block"},span.onclick=function(){modal.style.display="none"},window.onclick=function(n){n.target==modal&&(modal.style.display="none")};
/** Share Buttons Code **/
function share(t){var e="menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left="+(screen.width/2-300);"facebook"==t?window.open("https://facebook.com/sharer.php?t="+document.title+"&u="+window.location.href,"",e):"twitter"==t&&window.open("https://twitter.com/share?text="+document.title+"&url="+window.location.href,"",e)}I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.
| Function | Description |
|---|---|
| event.target | Returns which DOM element triggered the event |
| on() | Attaches event handlers to elements |
I have used JavaScript code to show and hide this modal popup and also to make share button work properly if you don't want that, simply remove the JavaScript code.
But one thing that you should keep in mind that the main beauty of this modal popup is share buttons and show hide functionality.
Result :
So here we are, We have done and our project Full Screen Greetings Modal Popup is ready now you can copy and combine all the codes provided above into single html file and have fun.If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.
Download Project (Full Screen Greetings Modal Popup) File :
Full Screen Greetings Modal Popup.zip
File Size 6.93 KB
Click the download button and you will be redirected to download page from where you can download project files.
If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.
So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.
Thank you !
source:softwebtuts.com
0 comments for Full Screen Greetings Modal Popup