- [Instructor] We'll finish up our application
by adding a Bootstrap modal.
We do have to fix one tiny thing here,
and that is that I need to go ahead
and pass the modalPhoto
as a prop from right here.
So on our App.vue file,
we'll go ahead and pass that along.
That completes that.
And then, all we need to do
is go to our ProductList and add our modal.
So to do that, we're going to need
to modify our image.
And this is the trigger for the modal.
So this will need to say data-toggle, modal,
and then data-target, and this will target
an element called site-modal.
So we'll be creating this element in a minute.
So let me talk a little bit about how Bootstrap does things.
In Bootstrap, most of the components,
especially the interactive components,
have data attributes like this.
And in the first one here,
is identifying the type of component
that we want to call, which will be a modal,
and the second one is targeting a specific element
that we need to create.
Now, there's actually two ways of creating modals.
You can create an individual modal
for each of our list items,
so we could actually create a number of modals
for each one of our items in the inventory.
But that really wouldn't be the best way
to take care of things.
We can create a variable modal
that is just going to receive
the name of the image that we want to display,
and it'll pop up and display the proper image.
So that's what I'm doing here,
and we're going to need to add an item in our code.
However, if you know how Vue.js works,
right now, we have everything in our component
in a single tag called transition-group.
Because we want to add something at the beginning,
we're going to need to wrap everything up inside a div.
So if you have a single tag in Vue.js,
it'll work just fine, two tags like this.
Everything has to be wrapped up in a single tag.
So, I need to paste transition-group inside this div.
And then, I'm going to add my modal up here.
I'll put this in an article tag,
and I'm going to give it an id of,
as I called it before, site-modal,
and I'll give it some Bootstrap classes here
so that it looks nice.
So this will have a class of modal
and also a fade class because I want it to play
an animation that's built-in.
All right, and in here, I'm going to add another div.
This is going to have a class of modal-dialog,
modal-dialog-centered,
and modal-xl.
So Bootstrap works by having a ton of classes
that define how things look.
Here, we're just saying
that this right here is the main modal,
and then this internal component is the actual dialog,
the thing that appears on the screen,
and we want it to be centered.
This is a newer Bootstrap 4 class
that just makes everything center
in the middle of the screen.
That used to be really hard to do,
I'm so happy that they added it.
And this modal-xl specifies the size of the modal.
There's actually multiple sizes
that you can specify for modals.
I'm asking for the biggest one
since I want to put an image in,
and then I want the image to be as big as possible.
All right, so then, there's usually a div
with a class of modal-content.
And this div usually has the items that we want to display.
I'm going to keep this modal super simple.
The modal component in Bootstrap,
it's actually quite complicated,
and there's a lot of options
for things like headers and footers
and all kinds of other stuff, close boxes.
But I'll keep mine super simple.
If you want to learn more about Bootstrap 4,
make sure you check out Bootstrap 4 Essential Training.
And so here, I'm just going to put in an image,
and when somebody clicks on the image,
I want it to disappear.
So this is going to get all data-dismiss,
and it's going to get modal attribute.
So again, whenever you see a data attribute in Bootstrap,
it is triggering some sort of action,
in this case, it's going to dismiss the modal.
And we're going to add
a class here of img-fluid
because I want the image to take up
as much room as it can on the container,
and we can use the regular source attribute
because we want to pass along a variable name,
so we'll have to use the colon source attribute,
we'll put in the value of modalPhoto,
and in here, we'll put in some sort of text
that just describes things.
And it looks like I need to make sure
that I remove this hashtag right here,
otherwise, the id, it'll have an id of a pound sign,
and that's wrong, so let's save that.
Now, let's try running the application.
All right, let's close this out
and try clicking on the these,
and you can see that looks really good,
and it displays the modal
with the Bootstrap animation,
and I can click on any one of these,
and it looks pretty good.
So that's pretty much all we want to do with this animation.
There is a few other things that we want to take a look at,
and we'll take care of those in the next video.