Hello, in the video, I am going to show you how to implement a model, so why is a model to the official
website model?
Is something like this up here when you trigger it via a button, for example?
And if clicked up, it appears we can't access the rest of the website is great idea of a total.
You can have images here.
You could have Bidstrup Grid System here, but just means if you click off it excessive click the X
goes away.
If you click close it goes away and site changes more back in functionality.
B could trigger some P some Pyfrom for example and actually perform some slower, maybe a data base
request.
So this is what we're going to be implementing.
The bunch more stuff that you can do with your model.
You can vertically central, you can use the grid system, not to mention and you know, it's all covid
here.
So feel free and you can do full screen ones.
No.
Well.
Like, so so feel free to take a look at all different features available to you for the mobile system,
I'll provide a link to this in the description.
So let's get on implementing a simple model.
The first of all, we are going to create a broad term and this is going to have a type of short term
and it's going to be a class of feel free to check that.
My separate bootstrap video covering buttons and the class is available because all of this is covered
somewhat.
Rehash that the data toggle and it toggling is Tognum, some sort of model, and then you specify a
target.
And this will be an idea.
The idea of the model which we have to create created I don't want to call it epic model and I'll launch
a model.
So we've got the bottom now.
Now we need to create the model.
So we put a div.
A class of mobile, they they the in animation, the OED, which is this Royte copy paste, we don't
need the hash because obviously the hash just states that it is an idea which is stated by this attribute
right here.
Now we're gonna have a TAB index.
It's going to be negative one just so you can tab onto it while it is in visible area.
Does labeled by.
Yeah.
EPIK Mulgoa label, which we will implement inside in a moment, and.
Anything else we need in here?
Yes, an area dash and by default, it's going to be set to true.
You
know, we're going to have a mobile dialogue, so did.
Plus
equals modal dialogue.
And all of the modal stuff will be happening within here when I'm Modahl content.
This is the format they required based on the way bootstrap is designed and multiclass modal dash.
And and then in here, what we're going to do is have a couple of three main sections, Silvani Div
or class of modal.
Keda feel free to change the color your own styling as you want to price five, six, eight, 20 div
tag and Stalley, however you want to have my styling and they the mode or total class that just provides
some nice styling I.D. equals.
This one here does what it needs to match with, and it's going to be epic title or whatever you want
to call it, laughing in here when I put that exporter in the top row, which also closes it well.
So this is going to have a type of bottom class of no data that this myth equals modal area does label.
He knows you don't need any text, but he is fine, and that will be for the actual.
No appearance and so spine area that you done.
And sometimes so hold on and upset, so that's it for the Adare so we can get out of here.
We're going to put the body now to this evening.
We did the d'Hiv.
I'm going to put a cloth
modo on the boy's body.
And in here you immediately quote video, put paragraph where you all want to keep it simple and put
the law in subtext, which is a very popular text to put in the place of death so that I don't need
to say that yet.
I'll save you the tape anyway and I'm going to implement the photo.
So Dave, this is where the bottom part is, where you got like close and save change button, for example.
Modahl, I mean, just going for class, actually, the model does fattouh them button type equals button
class equals between BTE and secondary and you can do whatever you want.
This is the one I've chosen to dismiss because models of this will dismiss the model when pressed.
And this is going to say close and save button.
I want to put that one in my style.
We don't want to dismiss the model you can make if you want to talk to you.
And this doesn't save anything.
This is just the front end to show you how to format and what it could look like.
Now, if we go back refresh, we get the launch model, click it, a launch of the analysis, make sure
all of the buttons are working.
So that works.
That works for Click Effect, that works and say don't do anything yet.
And it is also responsive as well.
And if you go in here, you can see how to do different sizes as well.
So.
Somewhere, so if you wanted anything below a medium size to be completely full screen, which we should
be triggering now.
You can do it's a similar process and obviously that will look great on mobile devices, if that is
how you implement mobile, a very simple one, the principle is the same.
You can add images, more text, you can add the bootstrap system, which is auklet in here and whatever
you want.
If you have any questions, though, feel free to drop me a message or comment in the comment section.
As usual, I look forward to seeing you in the next video.