In this video, I'm going to show you how to build a custom Modal or in other words a Pop-Up. Something 1
like this. 2
When user clicks on the button, a Modal opens up with a form. Modal's are widely used and very handy. 3
Putting forms inside is one use. One very hated option is to use it as a Pop-Up. 4
You know what I'm talking about. When you're browsing a page and some annoying marketing message pops 5
out of nowhere, when we didn't click anything. 6
This time we're gonna go with the less controversial option, a form opening up when user clicks on this 7
get access button on our team app website. 8
Building this inside Webflow isn't as straightforward as you would think. 9
There is no ready-made Modal component that we can just add to the page. 10
There is one, which is called lightbox. But it's mainly for images and videos. But forms or anything like 11
that, there is none. 12
This was something that surprised me in the beginning and when I watched the tutorial on how to build 13
this Modal with a form inside. 14
That's when, I sort of, understood what sort of web design platform Webflow was - professional tool, where 15
you build things from scratch like a developer. Not just dropping ready-made components. 16
So it might be surprising for you too, 17
but that's what makes Webflow awesome. So let's begin. 18
What happens when modal opens up? 19
There is a background color that overlays on top of the entire page. And there is this forum inside it. 20
Right? Then on a close, it all disappears. 21
First, let's build that and then we will take care of the interactions. 22
I'm going to add a div block and put it on top of the page. 23
And name it modal wrapper. 24
That's where everything is going to go. 25
Now we need to overlay this on the entire screen. 26
We can do that by fixed position. And selecting Full. 27
Let's give it a color, so we can see what's going on. 28
So, it's overlaying the hero, but not the section after it. 29
And also it's behind the Navbar. 30
But we want it to go on top of everything. To overlay it on top of everything, we need to use a feature 31
that we haven't discussed yet. 32
Z-index. 33
Which we can find under position settings. 34
It shows up on all positions, besides auto or static. Z stands for Z axis, the depth. 35
Basically it lets us control stacking of elements on top of each other. By default, 36
most elements are set to 0 value. 37
If we had 2 elements overlapping each other, one that has higher Z value is going to stack on top. 38
I have also linked the Webflow's video tutorial on Z-index, in case, you want to learn a bit more about 39
it. 40
So, if I changed Z index to 1, it's going to stack on top of all 0 values. Great. But it's still behind 41
the Navbar. 42
How come? The navbar doesn't show that it has a Z value inside. But since navbar is a readymade component, 43
probably it has some default Z-index from Webflow. Which makes sense, because navbar on mobile views 44
has a drop-down menu. Which needs to stack on top of everything, 45
if we are opening the menu on mobile devices or tablet devices. If we give our modal higher Z-index 46
value then it will stack on top. 47
We can't see what the value for the navbar is, but I'll tell you straight up it's 1000. 48
So if we set modal at 1001 then it's going to do the trick. If it doesn't for you, 49
maybe the value is different. Just go higher and higher until it works. 50
There is no limit how high you can go. Put 10 000 if you want. Okay. 51
Finally, let's make the modal wrapper a little transparent, something like 80%. 52
Next, 53
we need a modal in the center. Before we add that, let's turn wrapper into flexbox. So we can align content 54
in the center. 55
New div block will go right in the middle. Name it modal and style it. 56
Next, just add a content: a headline, a paragraph, and a form block. 57
We don't have designs for this, I'm just winging it for demonstration. 58
We already have classes for the form element, so let's just reuse those, like button and field. 59
♫ 60
♫ 61
I'm gonna give the modal maximum width, so the content fits nicely inside. The fields have max-width, 62
that's why they're cutting short like that. 63
Excellent. 64
We need one more thing on the modal. A close button. 65
Otherwise, how do users know where to click 66
to close the modal? We can put something like "Cancel" or "Close" link underneath a button. Or an"X" icon on 67
the corner of the modal. 68
Let's go with a close icon, because it's a little more difficult, so you'll learn more. 69
In reality, you already know everything you need to build this. 70
We just need a "Close" icon, which we can get from Flaticon. And then position it in the top right corner 71
by using absolute positioning. 72
I'm going to put the icon inside another 73
div block. 74
Let's give the image a width of 16 pixels. 75
Now, we can set absolute position on the parent div block, to position it on top of the right corner. 76
But when you do that, it's gonna jump to the top corner of the page, not the modal. 77
Do you remember what we need to do? 78
We need to set the modal to relative position, so that the icon is positioned relative to the modal. 79
There. 80
Now, we can position icon nicely by giving some margins. 81
Just so you know, SVG colors are editable in Figma. 82
If we wanted, we could open this SVG and Figma and change the color to match our palette from the project. 83
But we don't have to do that right now. 84
We can instead decrease the opacity to something like 30% to make it grey. 85
Okay. 86
Let's check the preview. 87
The cursor doesn't change to a hand. 88
I should have used a link block, instead of a regular div block. But that's OK. We can manually change 89
the cursor type from the styles panel. 90
It's that easy. And we can increase the clickable space, so users don't have to be so precise on pointing 91
it on the icon. 92
You can do that just by increasing padding on the parent element, not the image. 93
But now we should decrease the margins or it's too far from the edge. Maybe even remove the margins. 94
A hover effect would be nice. We can simply increase the opacity on hover and of course give it a transition 95
effect, so it's nice and smooth. 96
And that's all. The modal is done. 97
Now what? We need interactions. Close and Open interactions. 98
Let's start with close since it's already open. Our trigger is obviously the close icon. Select and add 99
a new click trigger on the close icon. 100
New animation and name it "closed modal". So what are we animating? The entire modal wrapper. 101
We want it to disappear. So, select the modal wrapper on the canvas and add a new action. 102
We can simply change the opacity to 0% so it fades out. 103
Let's change the easing and make the transition faster, something like 200 milliseconds. 104
That's all good. 105
But if you move your mouse over that canvas, you'll see that modal and form elements are still there. 106
That's because we simply made it transparent. 107
They didn't go anywhere. To actually hide them from the page, 108
we need to change the display to none. Right after that fading animation is done. So we can add a new 109
action, which is hide and show action. And inside display settings, we're going to change it to none or 110
hidden. 111
Check the preview, how it all works. 112
Perfect. Closing is doing fine. 113
Also, it would be nice if we could trigger close by clicking the area outside of the model. 114
So basically, closing when the user clicks on the background space. 115
Now your first instinct might be to add that to the modal wrapper, but that's not going to cut it. 116
Because even though it works, it also triggers when you click anywhere on the modal too, even inside the 117
fields. 118
Because all that is nested inside the modal wrapper. So clicking the form is considered same as clicking 119
the modal wrapper. 120
So, we need a new element that's overlaid behind the modal. And we're gonna set the trigger on that 121
element. Give it similar style, like the modal wrapper. Fixed position and full. No need for the background 122
color. 123
Keep it transparent. 124
Now, if you add this closed area after the modal, then it's going to stack on top of the modal. 125
But if you move it before the modal, then modal will stack on top. 126
Usually, that order change is enough. But if for some reason it's not, then you can use Z-index values. Give 127
modal higher Z-index. For example 2, and one for the close area. And that will do the job. 128
Add the same close interaction to that close area and that's it. 129
Now, when we click on the modal itself, nothing happens, but when we click on the background, it's going 130
to close. 131
Finally, we need to add the open interaction. Before we do that, first 132
let's hide the modal wrapper on a default state. That we can do from the styles panel. Change display 133
to none for the entire modal wrapper. 134
Our trigger is the get access button in the navbar. 135
So, we're gonna add a new interaction to that button. 136
A new animation. And let's name it "modal open". 137
Now, we need to select modal wrapper to add animations to it. But we can't do that from the canvas anymore, 138
since it's hidden. 139
So, we have to select it from the navigator. Once it's selected, add a new action. Since the model is hidden, 140
first, we need to show it. 141
So choose Hide/Show from the dropdown. And then change the display to Flex. 142
Why Flex? Because that's our original display setting for the modal wrapper. 143
Okay good. But that just shows the whole thing 144
instantly. No fading. To add fading, 145
we need to start it from 0% opacity and then end it to 100% opacity. 146
So, let's add 0% first. 147
Which we're going to set it to initial stage from this toggle. Because if we don't, then it's going to 148
show 100% because of the display settings, then jump to 0% and then transition to 100% again, 149
which is a terrible animation. 150
So 0% has to come before the hide and show action. 151
And now we can add 100% opacity as the final state. Change the easing and duration to similar 152
values as we did with close. 153
And that's it. 154
Let's test the whole thing in preview mode. 155
Perfect. 156
All is working fine. And that's how you create a custom modal in Webflow. 157
You wouldn't expect that such a widely used thing needs so many steps, but that's how all of them are 158
built. 159
Developers even have to code the whole thing by hand.