1
00:00:01,190 --> 00:00:08,210
Hello, in the video, I am going to show you how to implement a model, so why is a model to the official

2
00:00:08,660 --> 00:00:10,130
website model?

3
00:00:10,130 --> 00:00:14,960
Is something like this up here when you trigger it via a button, for example?

4
00:00:15,290 --> 00:00:21,790
And if clicked up, it appears we can't access the rest of the website is great idea of a total.

5
00:00:21,980 --> 00:00:23,270
You can have images here.

6
00:00:23,270 --> 00:00:29,390
You could have Bidstrup Grid System here, but just means if you click off it excessive click the X

7
00:00:29,840 --> 00:00:30,380
goes away.

8
00:00:30,380 --> 00:00:34,660
If you click close it goes away and site changes more back in functionality.

9
00:00:34,660 --> 00:00:42,860
B could trigger some P some Pyfrom for example and actually perform some slower, maybe a data base

10
00:00:42,860 --> 00:00:43,520
request.

11
00:00:44,210 --> 00:00:45,770
So this is what we're going to be implementing.

12
00:00:46,040 --> 00:00:50,570
The bunch more stuff that you can do with your model.

13
00:00:50,570 --> 00:00:57,020
You can vertically central, you can use the grid system, not to mention and you know, it's all covid

14
00:00:57,020 --> 00:00:57,280
here.

15
00:00:57,290 --> 00:01:00,360
So feel free and you can do full screen ones.

16
00:01:00,890 --> 00:01:01,400
No.

17
00:01:01,970 --> 00:01:02,600
Well.

18
00:01:05,400 --> 00:01:14,570
Like, so so feel free to take a look at all different features available to you for the mobile system,

19
00:01:14,620 --> 00:01:17,230
I'll provide a link to this in the description.

20
00:01:17,940 --> 00:01:22,140
So let's get on implementing a simple model.

21
00:01:22,650 --> 00:01:29,700
The first of all, we are going to create a broad term and this is going to have a type of short term

22
00:01:30,780 --> 00:01:33,240
and it's going to be a class of feel free to check that.

23
00:01:33,240 --> 00:01:40,550
My separate bootstrap video covering buttons and the class is available because all of this is covered

24
00:01:41,020 --> 00:01:41,410
somewhat.

25
00:01:42,090 --> 00:01:50,040
Rehash that the data toggle and it toggling is Tognum, some sort of model, and then you specify a

26
00:01:50,040 --> 00:01:50,730
target.

27
00:01:50,730 --> 00:01:52,790
And this will be an idea.

28
00:01:52,820 --> 00:02:02,130
The idea of the model which we have to create created I don't want to call it epic model and I'll launch

29
00:02:02,960 --> 00:02:04,250
a model.

30
00:02:04,590 --> 00:02:06,330
So we've got the bottom now.

31
00:02:06,730 --> 00:02:08,820
Now we need to create the model.

32
00:02:08,820 --> 00:02:10,740
So we put a div.

33
00:02:13,220 --> 00:02:24,020
A class of mobile, they they the in animation, the OED, which is this Royte copy paste, we don't

34
00:02:24,020 --> 00:02:30,860
need the hash because obviously the hash just states that it is an idea which is stated by this attribute

35
00:02:30,860 --> 00:02:31,820
right here.

36
00:02:32,210 --> 00:02:33,980
Now we're gonna have a TAB index.

37
00:02:37,890 --> 00:02:44,090
It's going to be negative one just so you can tab onto it while it is in visible area.

38
00:02:44,130 --> 00:02:46,940
Does labeled by.

39
00:02:52,320 --> 00:02:52,670
Yeah.

40
00:02:59,930 --> 00:03:07,970
EPIK Mulgoa label, which we will implement inside in a moment, and.

41
00:03:09,880 --> 00:03:11,980
Anything else we need in here?

42
00:03:12,040 --> 00:03:18,220
Yes, an area dash and by default, it's going to be set to true.

43
00:03:21,590 --> 00:03:21,720
You

44
00:03:24,860 --> 00:03:28,400
know, we're going to have a mobile dialogue, so did.

45
00:03:31,430 --> 00:03:31,970
Plus

46
00:03:35,030 --> 00:03:38,170
equals modal dialogue.

47
00:03:40,230 --> 00:03:46,600
And all of the modal stuff will be happening within here when I'm Modahl content.

48
00:03:46,620 --> 00:03:55,550
This is the format they required based on the way bootstrap is designed and multiclass modal dash.

49
00:03:56,340 --> 00:04:08,280
And and then in here, what we're going to do is have a couple of three main sections, Silvani Div

50
00:04:09,450 --> 00:04:13,620
or class of modal.

51
00:04:17,490 --> 00:04:28,620
Keda feel free to change the color your own styling as you want to price five, six, eight, 20 div

52
00:04:28,650 --> 00:04:36,520
tag and Stalley, however you want to have my styling and they the mode or total class that just provides

53
00:04:36,520 --> 00:04:41,070
some nice styling I.D. equals.

54
00:04:43,570 --> 00:04:52,600
This one here does what it needs to match with, and it's going to be epic title or whatever you want

55
00:04:52,600 --> 00:04:59,810
to call it, laughing in here when I put that exporter in the top row, which also closes it well.

56
00:05:00,340 --> 00:05:16,300
So this is going to have a type of bottom class of no data that this myth equals modal area does label.

57
00:05:19,300 --> 00:05:31,570
He knows you don't need any text, but he is fine, and that will be for the actual.

58
00:05:33,290 --> 00:05:38,480
No appearance and so spine area that you done.

59
00:05:43,400 --> 00:05:51,990
And sometimes so hold on and upset, so that's it for the Adare so we can get out of here.

60
00:05:52,010 --> 00:05:54,030
We're going to put the body now to this evening.

61
00:05:54,110 --> 00:05:55,680
We did the d'Hiv.

62
00:05:56,370 --> 00:05:57,560
I'm going to put a cloth

63
00:06:00,050 --> 00:06:03,950
modo on the boy's body.

64
00:06:04,640 --> 00:06:10,970
And in here you immediately quote video, put paragraph where you all want to keep it simple and put

65
00:06:10,970 --> 00:06:21,620
the law in subtext, which is a very popular text to put in the place of death so that I don't need

66
00:06:21,620 --> 00:06:22,520
to say that yet.

67
00:06:23,030 --> 00:06:27,440
I'll save you the tape anyway and I'm going to implement the photo.

68
00:06:27,800 --> 00:06:33,950
So Dave, this is where the bottom part is, where you got like close and save change button, for example.

69
00:06:34,400 --> 00:06:49,460
Modahl, I mean, just going for class, actually, the model does fattouh them button type equals button

70
00:06:50,600 --> 00:06:59,630
class equals between BTE and secondary and you can do whatever you want.

71
00:07:00,170 --> 00:07:07,760
This is the one I've chosen to dismiss because models of this will dismiss the model when pressed.

72
00:07:08,030 --> 00:07:12,320
And this is going to say close and save button.

73
00:07:13,410 --> 00:07:17,480
I want to put that one in my style.

74
00:07:18,500 --> 00:07:23,510
We don't want to dismiss the model you can make if you want to talk to you.

75
00:07:23,660 --> 00:07:25,220
And this doesn't save anything.

76
00:07:25,280 --> 00:07:30,500
This is just the front end to show you how to format and what it could look like.

77
00:07:31,130 --> 00:07:39,110
Now, if we go back refresh, we get the launch model, click it, a launch of the analysis, make sure

78
00:07:39,110 --> 00:07:40,670
all of the buttons are working.

79
00:07:40,670 --> 00:07:42,200
So that works.

80
00:07:43,040 --> 00:07:49,430
That works for Click Effect, that works and say don't do anything yet.

81
00:07:49,880 --> 00:07:53,270
And it is also responsive as well.

82
00:07:53,450 --> 00:07:59,140
And if you go in here, you can see how to do different sizes as well.

83
00:07:59,150 --> 00:07:59,750
So.

84
00:08:01,580 --> 00:08:08,180
Somewhere, so if you wanted anything below a medium size to be completely full screen, which we should

85
00:08:08,180 --> 00:08:09,620
be triggering now.

86
00:08:10,700 --> 00:08:17,090
You can do it's a similar process and obviously that will look great on mobile devices, if that is

87
00:08:17,090 --> 00:08:20,300
how you implement mobile, a very simple one, the principle is the same.

88
00:08:20,300 --> 00:08:26,210
You can add images, more text, you can add the bootstrap system, which is auklet in here and whatever

89
00:08:26,210 --> 00:08:26,490
you want.

90
00:08:26,570 --> 00:08:33,470
If you have any questions, though, feel free to drop me a message or comment in the comment section.

91
00:08:33,500 --> 00:08:36,680
As usual, I look forward to seeing you in the next video.