Hi everyone, in this video we are going to...
talk about Popup Modals or overlay boxes.
Remember in the last video, when you clicked the Start Trial button...
you ended up at a new page.
We're going to do something, when you click this button, you're ready for it?
Just kind of like pops up over the top, fades out the background...
and we don't have to jump pages, it feels a little bit more fluid.
That's the word, not very popular at the moment.
So we're going to close it down, open it up, close it down.
So we're going to learn how to do that now in our prototype in Adobe XD.
First thing to do to create a modal...
is we still need this artboard but we don't need a lot of the stuff in it.
Plus we're still in Prototype Mode from when we're working in the last video.
So switch to 'Design', and we are going to say goodbye to the Nav.
I'm going to click on that, goodbye to the footer.
So I've just got this last chunk left.
And where should it be?
There's stuff up there too, make sure you get rid of everything you don't need.
So what we want to do is, I just want this chunk.
I'm going to have to-- make sure you got a white box in the background...
or something to overlay over the top of the Home Page like you saw in the intro.
Let's just give it a try as is.
There's a few other things I want to do to it...
but let's just, let's just cut to the chase, Dan.
So we're going to go back to 'Prototype Mode'...
and we're going to say...
when that button is clicked, what's going to happen?
Instead of going over here, and go into this Tap Transition...
we're going to go to Tap still, but we're going to say 'Overlay'.
And that's the magic source.
What's going to happen is, it's going to overlay that page...
over at the top of this one...
excluding the background.
So just the physical things on this page.
Let's just give it a preview to see what it looks like.
Give it a preview. Cool, huh?
You'll notice, by default if I click anywhere it gets rid of it.
So that's something that just happens by default.
A couple of things happen there, one is I did a shortcut to open this preview.
So it is 'Command Enter' on a Mac, or 'Ctrl Enter' on a PC.
So click down your keyboard, the Enter key, sometimes it's the Return.
Sometimes it's got just a little arrow on it.
So hold those down, that launches the preview, which is cool.
And let's say I have a little look at this thing.
You'll notice it's a dotted line.
So the solid line shows our transition, this one here's an overlay.
The other thing that's happening in here is that it's going to that page.
It's dissolving, which is fine, it's got everything else, that's perfect.
What ends up happening to this page...
if I click on it you'll notice this little icon.
This little icon here says whenever--
when anything else is clicked just go back to...
not the page next to, but whatever page you got it from.
So, what's it called? Return to Previous Artboard.
So if I click the Start Trial button on like one of the hundred other pages...
it's going to load this page...
and when I click off it's going to go back to that original page.
Do you get what I mean?
So it's not going back to Home Page..
it's going back to wherever you came from, which is really cool.
Sometimes that can be turned off though...
like I've broken it where it's just disappeared like that, and I'm like...
"Hmm, how do I make that happen again?" So you click on it, and you say 'Tap'...
which is perfect.
And you go to this one that says Previous Artboard.
Then it turns into that little return button, then goes to that.
A couple other things I want.
I want the little cross because clicking anywhere is a bit weird for people.
It's going back to that wires UI kit for the wireframes.
I've closed mine down; where are you, wires?
I'm looking for the cross, I could go to Adobe Market, or Materials...
but I know it's going to be in here, it's going to be easy enough to find.
Cool, there's a cross, there's a cross. I'm going to break it apart here.
So I'm going to right click it, 'Ungroup Symbol'.
Grab that cross, jump back into my other documents.
I'm going to put it in the corner here.
And because I've used that blue, like the way we had in that first one...
it's just made it easy, I don't have to recolor everything every time.
I'll show you a trick for recoloring it all at the end, if you are like...
"Man, hit that blue."
So hold 'Shift' down, make it a little bit bigger.
Now it's going to be my little cross.
Even though you can click anywhere...
I still feel like you need a button, that actually click.
So I preview. What's the shortcut? 'Command Enter', or 'Ctrl Enter' on a PC.
Click on there, cool, huh? Close it down. Nice.
One of the things I like to do to close it down is -
I zoom out.
- is I'm going to grab a big rectangle...
because you saw at the beginning it kind of grayed out the background.
There's an easy way to do that, just grab a bigger rectangle...
give it no border, give it a fill of our black.
Then just lower down the opacity of this thing.
Then go back to your 'Arrow Tool', black arrow, right click it, send it back.
So we're going to give it a preview...
and there's going to be a couple of little issues we need to fix.
So previewing, and the weird thing is it previewed from this page.
You might already run into this...
where sometimes it's previews from the Home Page, and sometimes from this.
So what ends up happening is if I have nothing selected...
so my black arrow, just click in the background.
It's going to default to this Home Page. Why? Because if I go to Prototype...
and if I zoom in, in the top corner here, can you see this little Home icon?
That just indicates that if XD's not sure which page you mean...
it's going to start from this little Home icon; you can change that.
You could say, Start Trial could be my home.
So that's the default, but it's a bit weird.
I'm going to go back here.
The way to override that, and what we did there by accident...
is if you click the artboard name, 'Start Trial'...
you're kind of telling XD, just preview this one for me.
Even though I haven't set it as the Home.
And if I click it, it's going to start from there.
If I have nothing selected, it will start from the Home screen.
So what's wrong? Let's give it a click, kind of half works.
It's kind of in the middle there...
you're like, "What happened to the top bits?"...
the middle bits, it's all a little bit weird.
So let me show you the two things that are wrong.
One is, it's the--
This first option here, if I go back to Design...
remember, when we were doing my crazy cell phone footage...
we changed the Viewport height.
We should probably just switch it back to matching both of them...
because that's the line that I need when I'm previewing.
So I'm going to copy it and go back to this.
It's up to you, they just have to match.
Doesn't really matter if you've gone for...
the shorter or the taller of the Viewport heights.
I'm just going to go back to that original one...
where we're dealing with the 366 wide and 768.
Just so I'm aware that that's the--
that's the line that I can't design underneath...
or at least a lot of people won't see what I put under here unless they scroll.
That's going to get rid of part of it. Let's preview that.
Back to my kind of skinnier model, but that's okay.
If I click on this...
kind of works, but they're still that top chunk. See this bit here.
I'll show you why that is.
So if you go to Prototype...
and I click on this, and I click on 'Button'...
and you can kind of see it here, there's a big green thing.
It's going to grab that and jam it...
and start it wherever the top of the green box is.
So what I want to do is close it down, can we close it down?
I'm just clicking on the blue box, and grab that, and just move it to the top.
So instead of being kind of half part the way down...
I've just dragged this center bit to the top.
Now if I preview, and I click on this, kind of covers the whole thing, here we go.
Cool, huh? I love pop-up modals, you might not like them.
It's definitely a phase that the internet is in, and I'm in.
It's just a way of, instead of jumping through like 20 pages...
it allows you to kind of jump--
you'd still be able to see where you are, you can go back to it.
And you don't have to have this...
like completely separate page to jump back and forth.
It feels like a less extra step.
Even though really it's not, just a trick.
Especially for login screens, just something that's quite small.
Definitely great for, like help boxes.
If you click on the little question mark to give yourself a little hint.
It can be helpful.
And the trick we did today, is we put, under Design we put a big black box...
and we just lower the opacity down...
and kind of covered it up to make it really stand out against the background.
All right, friends, that is it for this video.
I will see you in the next one.
Hi there, I hope you enjoyed the video.
My name is Daniel Scott.
If you would like to do the full course...
there will be a link in the description for that.
Please give this video, on YouTube here...
a thumbs up, really helps me in what I'm doing.
Also, consider subscribing to the channel.
I release a video like this every week, for your viewing pleasure.
All right, bye.