0
1
00:00:02,750 --> 00:00:07,550
In this video, I'm going to show you how to build a custom Modal or in other words a Pop-Up. Something
1

2
00:00:07,550 --> 00:00:08,330
like this.
2

3
00:00:08,440 --> 00:00:14,240
When user clicks on the button, a Modal opens up with a form. Modal's are widely used and very handy.
3

4
00:00:14,270 --> 00:00:19,640
Putting forms inside is one use. One very hated option is to use it as a Pop-Up.
4

5
00:00:19,700 --> 00:00:24,080
You know what I'm talking about. When you're browsing a page and some annoying marketing message pops
5

6
00:00:24,080 --> 00:00:26,650
out of nowhere, when we didn't click anything.
6

7
00:00:26,690 --> 00:00:32,290
This time we're gonna go with the less controversial option, a form opening up when user clicks on this
7

8
00:00:32,300 --> 00:00:35,390
get access button on our team app website.
8

9
00:00:35,390 --> 00:00:39,540
Building this inside Webflow isn't as straightforward as you would think.
9

10
00:00:39,560 --> 00:00:44,150
There is no ready-made Modal component that we can just add to the page.
10

11
00:00:44,180 --> 00:00:50,270
There is one, which is called lightbox. But it's mainly for images and videos. But forms or anything like
11

12
00:00:50,270 --> 00:00:51,350
that, there is none.
12

13
00:00:51,350 --> 00:00:56,330
This was something that surprised me in the beginning and when I watched the tutorial on how to build
13

14
00:00:56,330 --> 00:00:58,460
this Modal with a form inside.
14

15
00:00:58,490 --> 00:01:04,310
That's when, I sort of, understood what sort of web design platform Webflow was - professional tool, where
15

16
00:01:04,310 --> 00:01:09,050
you build things from scratch like a developer. Not just dropping ready-made components.
16

17
00:01:09,050 --> 00:01:10,640
So it might be surprising for you too,
17

18
00:01:10,660 --> 00:01:13,460
but that's what makes Webflow awesome. So let's begin.
18

19
00:01:16,320 --> 00:01:18,580
What happens when modal opens up?
19

20
00:01:18,660 --> 00:01:24,240
There is a background color that overlays on top of the entire page. And there is this forum inside it.
20

21
00:01:24,240 --> 00:01:27,540
Right? Then on a close, it all disappears.
21

22
00:01:27,540 --> 00:01:31,200
First, let's build that and then we will take care of the interactions.
22

23
00:01:31,200 --> 00:01:34,260
I'm going to add a div block and put it on top of the page.
23

24
00:01:38,650 --> 00:01:40,320
And name it modal wrapper.
24

25
00:01:40,540 --> 00:01:42,360
That's where everything is going to go.
25

26
00:01:42,370 --> 00:01:45,610
Now we need to overlay this on the entire screen.
26

27
00:01:45,640 --> 00:01:48,700
We can do that by fixed position. And selecting Full.
27

28
00:01:54,220 --> 00:01:56,910
Let's give it a color, so we can see what's going on.
28

29
00:02:01,990 --> 00:02:04,900
So, it's overlaying the hero, but not the section after it.
29

30
00:02:05,050 --> 00:02:07,010
And also it's behind the Navbar.
30

31
00:02:07,120 --> 00:02:13,210
But we want it to go on top of everything. To overlay it on top of everything, we need to use a feature
31

32
00:02:13,210 --> 00:02:15,030
that we haven't discussed yet.
32

33
00:02:15,100 --> 00:02:16,090
Z-index.
33

34
00:02:18,970 --> 00:02:21,400
Which we can find under position settings.
34

35
00:02:21,400 --> 00:02:27,820
It shows up on all positions, besides auto or static. Z stands for Z axis, the depth.
35

36
00:02:27,820 --> 00:02:32,680
Basically it lets us control stacking of elements on top of each other. By default,
36

37
00:02:32,680 --> 00:02:35,230
most elements are set to 0 value.
37

38
00:02:35,230 --> 00:02:40,960
If we had 2 elements overlapping each other, one that has higher Z value is going to stack on top.
38

39
00:02:40,960 --> 00:02:46,270
I have also linked the Webflow's video tutorial on Z-index, in case, you want to learn a bit more about
39

40
00:02:46,270 --> 00:02:46,450
it.
40

41
00:02:46,750 --> 00:02:53,740
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

42
00:02:53,740 --> 00:02:54,670
the Navbar.
42

43
00:02:54,730 --> 00:03:00,910
How come? The navbar doesn't show that it has a Z value inside. But since navbar is a readymade component,
43

44
00:03:00,910 --> 00:03:06,820
probably it has some default Z-index from Webflow. Which makes sense, because navbar on mobile views
44

45
00:03:06,820 --> 00:03:10,560
has a drop-down menu. Which needs to stack on top of everything,
45

46
00:03:10,570 --> 00:03:17,320
if we are opening the menu on mobile devices or tablet devices. If we give our modal higher Z-index
46

47
00:03:17,320 --> 00:03:19,160
value then it will stack on top.
47

48
00:03:19,180 --> 00:03:23,770
We can't see what the value for the navbar is, but I'll tell you straight up it's 1000.
48

49
00:03:23,830 --> 00:03:28,450
So if we set modal at 1001 then it's going to do the trick. If it doesn't for you,
49

50
00:03:28,450 --> 00:03:31,910
maybe the value is different. Just go higher and higher until it works.
50

51
00:03:31,930 --> 00:03:36,380
There is no limit how high you can go. Put 10 000 if you want. Okay.
51

52
00:03:36,390 --> 00:03:40,670
Finally, let's make the modal wrapper a little transparent, something like 80%.
52

53
00:03:48,380 --> 00:03:48,730
Next,
53

54
00:03:48,740 --> 00:03:54,650
we need a modal in the center. Before we add that, let's turn wrapper into flexbox. So we can align content
54

55
00:03:54,680 --> 00:03:55,400
in the center.
55

56
00:03:58,750 --> 00:04:02,770
New div block will go right in the middle. Name it modal and style it.
56

57
00:04:25,040 --> 00:04:33,650
Next, just add a content: a headline, a paragraph, and a form block.
57

58
00:04:34,200 --> 00:04:37,440
We don't have designs for this, I'm just winging it for demonstration.
58

59
00:04:43,030 --> 00:04:58,540
We already have classes for the form element, so let's just reuse those, like button and field.
59

60
00:05:03,810 --> 00:05:21,930
♫
60

61
00:05:43,760 --> 00:06:07,390
♫
61

62
00:06:14,880 --> 00:06:20,440
I'm gonna give the modal maximum width, so the content fits nicely inside. The fields have max-width,
62

63
00:06:20,470 --> 00:06:40,130
that's why they're cutting short like that.
63

64
00:07:01,820 --> 00:07:02,300
Excellent.
64

65
00:07:05,170 --> 00:07:07,700
We need one more thing on the modal. A close button.
65

66
00:07:07,720 --> 00:07:10,060
Otherwise, how do users know where to click
66

67
00:07:10,060 --> 00:07:15,910
to close the modal? We can put something like "Cancel" or "Close" link underneath a button. Or an"X" icon on
67

68
00:07:15,910 --> 00:07:17,110
the corner of the modal.
68

69
00:07:17,200 --> 00:07:21,280
Let's go with a close icon, because it's a little more difficult, so you'll learn more.
69

70
00:07:21,280 --> 00:07:23,530
In reality, you already know everything you need to build this.
70

71
00:07:23,530 --> 00:07:29,500
We just need a "Close" icon, which we can get from Flaticon. And then position it in the top right corner
71

72
00:07:29,530 --> 00:07:38,390
by using absolute positioning.
72

73
00:07:38,470 --> 00:07:40,600
I'm going to put the icon inside another
73

74
00:07:40,600 --> 00:07:41,050
div block.
74

75
00:07:47,050 --> 00:07:52,420
Let's give the image a width of 16 pixels.
75

76
00:07:52,440 --> 00:07:57,570
Now, we can set absolute position on the parent div block, to position it on top of the right corner.
76

77
00:08:01,950 --> 00:08:06,270
But when you do that, it's gonna jump to the top corner of the page, not the modal.
77

78
00:08:06,270 --> 00:08:08,250
Do you remember what we need to do?
78

79
00:08:08,460 --> 00:08:13,620
We need to set the modal to relative position, so that the icon is positioned relative to the modal.
79

80
00:08:14,010 --> 00:08:14,280
There.
80

81
00:08:14,280 --> 00:08:17,370
Now, we can position icon nicely by giving some margins.
81

82
00:08:25,010 --> 00:08:28,130
Just so you know, SVG colors are editable in Figma.
82

83
00:08:28,130 --> 00:08:34,910
If we wanted, we could open this SVG and Figma and change the color to match our palette from the project.
83

84
00:08:35,090 --> 00:08:36,950
But we don't have to do that right now.
84

85
00:08:36,950 --> 00:08:40,880
We can instead decrease the opacity to something like 30% to make it grey.
85

86
00:08:45,570 --> 00:08:45,800
Okay.
86

87
00:08:45,840 --> 00:08:46,940
Let's check the preview.
87

88
00:08:50,050 --> 00:08:52,480
The cursor doesn't change to a hand.
88

89
00:08:52,540 --> 00:08:57,640
I should have used a link block, instead of a regular div block. But that's OK. We can manually change
89

90
00:08:57,640 --> 00:08:59,500
the cursor type from the styles panel.
90

91
00:09:13,390 --> 00:09:18,880
It's that easy. And we can increase the clickable space, so users don't have to be so precise on pointing
91

92
00:09:18,880 --> 00:09:20,110
it on the icon.
92

93
00:09:20,110 --> 00:09:24,080
You can do that just by increasing padding on the parent element, not the image.
93

94
00:09:29,950 --> 00:09:35,320
But now we should decrease the margins or it's too far from the edge. Maybe even remove the margins.
94

95
00:09:42,790 --> 00:09:49,710
A hover effect would be nice. We can simply increase the opacity on hover and of course give it a transition
95

96
00:09:49,800 --> 00:09:51,590
effect, so it's nice and smooth.
96

97
00:10:08,510 --> 00:10:09,930
And that's all. The modal is done.
97

98
00:10:10,200 --> 00:10:14,260
Now what? We need interactions. Close and Open interactions.
98

99
00:10:14,280 --> 00:10:23,370
Let's start with close since it's already open. Our trigger is obviously the close icon. Select and add
99

100
00:10:23,490 --> 00:10:25,380
a new click trigger on the close icon.
100

101
00:10:32,220 --> 00:10:40,510
New animation and name it "closed modal". So what are we animating? The entire modal wrapper.
101

102
00:10:40,570 --> 00:10:45,790
We want it to disappear. So, select the modal wrapper on the canvas and add a new action.
102

103
00:10:45,790 --> 00:10:49,090
We can simply change the opacity to 0% so it fades out.
103

104
00:10:54,130 --> 00:10:58,520
Let's change the easing and make the transition faster, something like 200 milliseconds.
104

105
00:11:04,060 --> 00:11:04,620
That's all good.
105

106
00:11:04,630 --> 00:11:09,820
But if you move your mouse over that canvas, you'll see that modal and form elements are still there.
106

107
00:11:09,820 --> 00:11:11,740
That's because we simply made it transparent.
107

108
00:11:11,740 --> 00:11:15,340
They didn't go anywhere. To actually hide them from the page,
108

109
00:11:15,340 --> 00:11:21,490
we need to change the display to none. Right after that fading animation is done. So we can add a new
109

110
00:11:21,490 --> 00:11:26,990
action, which is hide and show action. And inside display settings, we're going to change it to none or
110

111
00:11:27,040 --> 00:11:27,430
hidden.
111

112
00:11:33,170 --> 00:11:35,060
Check the preview, how it all works.
112

113
00:11:37,230 --> 00:11:39,210
Perfect. Closing is doing fine.
113

114
00:11:41,920 --> 00:11:46,950
Also, it would be nice if we could trigger close by clicking the area outside of the model.
114

115
00:11:47,050 --> 00:11:50,440
So basically, closing when the user clicks on the background space.
115

116
00:11:50,510 --> 00:11:55,510
Now your first instinct might be to add that to the modal wrapper, but that's not going to cut it.
116

117
00:12:02,250 --> 00:12:07,740
Because even though it works, it also triggers when you click anywhere on the modal too, even inside the
117

118
00:12:07,740 --> 00:12:08,570
fields.
118

119
00:12:08,760 --> 00:12:15,090
Because all that is nested inside the modal wrapper. So clicking the form is considered same as clicking
119

120
00:12:15,090 --> 00:12:16,140
the modal wrapper.
120

121
00:12:16,140 --> 00:12:21,360
So, we need a new element that's overlaid behind the modal. And we're gonna set the trigger on that
121

122
00:12:21,360 --> 00:12:26,970
element. Give it similar style, like the modal wrapper. Fixed position and full. No need for the background
122

123
00:12:26,970 --> 00:12:27,510
color.
123

124
00:12:27,570 --> 00:12:28,530
Keep it transparent.
124

125
00:12:37,640 --> 00:12:42,680
Now, if you add this closed area after the modal, then it's going to stack on top of the modal.
125

126
00:12:45,440 --> 00:12:50,010
But if you move it before the modal, then modal will stack on top.
126

127
00:12:50,120 --> 00:12:56,830
Usually, that order change is enough. But if for some reason it's not, then you can use Z-index values. Give
127

128
00:12:56,840 --> 00:13:02,510
modal higher Z-index. For example 2, and one for the close area. And that will do the job.
128

129
00:13:09,630 --> 00:13:22,780
Add the same close interaction to that close area and that's it.
129

130
00:13:22,790 --> 00:13:27,650
Now, when we click on the modal itself, nothing happens, but when we click on the background, it's going
130

131
00:13:27,650 --> 00:13:28,530
to close.
131

132
00:13:31,290 --> 00:13:35,280
Finally, we need to add the open interaction. Before we do that, first
132

133
00:13:35,310 --> 00:13:40,920
let's hide the modal wrapper on a default state. That we can do from the styles panel. Change display
133

134
00:13:40,920 --> 00:13:43,310
to none for the entire modal wrapper.
134

135
00:13:43,410 --> 00:13:46,500
Our trigger is the get access button in the navbar.
135

136
00:13:46,650 --> 00:13:49,630
So, we're gonna add a new interaction to that button.
136

137
00:13:53,470 --> 00:14:00,430
A new animation. And let's name it "modal open".
137

138
00:14:00,490 --> 00:14:06,250
Now, we need to select modal wrapper to add animations to it. But we can't do that from the canvas anymore,
138

139
00:14:06,250 --> 00:14:07,220
since it's hidden.
139

140
00:14:07,240 --> 00:14:14,560
So, we have to select it from the navigator. Once it's selected, add a new action. Since the model is hidden,
140

141
00:14:14,570 --> 00:14:15,790
first, we need to show it.
141

142
00:14:15,890 --> 00:14:20,430
So choose Hide/Show from the dropdown. And then change the display to Flex.
142

143
00:14:20,460 --> 00:14:24,670
Why Flex? Because that's our original display setting for the modal wrapper.
143

144
00:14:25,080 --> 00:14:27,460
Okay good. But that just shows the whole thing
144

145
00:14:27,530 --> 00:14:30,110
instantly. No fading. To add fading,
145

146
00:14:30,110 --> 00:14:34,660
we need to start it from 0% opacity and then end it to 100% opacity.
146

147
00:14:34,670 --> 00:14:36,490
So, let's add 0% first.
147

148
00:14:42,360 --> 00:14:47,550
Which we're going to set it to initial stage from this toggle. Because if we don't, then it's going to
148

149
00:14:47,550 --> 00:14:54,060
show 100% because of the display settings, then jump to 0% and then transition to 100% again,
149

150
00:14:54,060 --> 00:14:56,380
which is a terrible animation.
150

151
00:14:56,490 --> 00:15:00,200
So 0% has to come before the hide and show action.
151

152
00:15:00,280 --> 00:15:07,620
And now we can add 100% opacity as the final state. Change the easing and duration to similar
152

153
00:15:07,620 --> 00:15:09,150
values as we did with close.
153

154
00:15:09,180 --> 00:15:09,840
And that's it.
154

155
00:15:15,580 --> 00:15:17,440
Let's test the whole thing in preview mode.
155

156
00:15:27,480 --> 00:15:28,060
Perfect.
156

157
00:15:28,080 --> 00:15:32,210
All is working fine. And that's how you create a custom modal in Webflow.
157

158
00:15:32,220 --> 00:15:37,260
You wouldn't expect that such a widely used thing needs so many steps, but that's how all of them are
158

159
00:15:37,260 --> 00:15:37,770
built.
159

160
00:15:37,770 --> 00:15:40,640
Developers even have to code the whole thing by hand.