Hello, in this bootstrap four video, we're going to show you modal models are really cool dialog prompt within bootstrap. They allow you to display some information. For example, on axia. I'll show you them actually, Lloyd on working. So if we just go to sonar systems code at UK, scroll down, these two buttons activate a modal. So if I click on this one, it opens up this little box, which just shows you what we're about.

So just have some basic text before you click contact us. It's a bit different. It's a input form that allows you to contact us. So it's just a great way of providing information to the user. Usually when an event is triggered, and it shows it instead of just cluttering up the interface. If we just had this on an omega three at individual section like this, it will become ridiculously long, especially if we're going to be adding more buttons in the future.

So We just go back to our web page pretty empty at the moment. Models are really, really simple to implement. There are two parts to the model. At least that's the way we see is the model itself, aka what appeared and something to trigger it most likely is going to be a button. So let's go and implement that button. So what we're going to do is go to type equals button.

Nice Java class, not really going to cover buttons because we have a separate video covering all of that. This is just to get something set up so we can actually trigger models, dash toggle, equals modal. And next we just put data, target equals good Yeah, there we go harsh words I'm working on clicking the wrong key when the keyboard is made, so this put modal name so this will be the name of the modal basically the ID which we'll have to set in a moment. That's remember whatever you put here area dash hidden equals true. really fancy and Nesquik milkshake. I'm an had one since I feel that you knew and I lasted one offer just let you know my craving for an NES quick.

Banana. No vanilla milkshake itself might have been vanilla. Plus, I used to dislike the smell of the powdered was smell so nice. Okay, let's actually move on now. I'm just going to put both open modal modal. And now we've got a button set up.

Now it's going to code our modal, you can put it wherever you want, but generally, it's not really part of the container. That's pretty exciting. It's a good rule of thumb to separate after all the body's main content because you're not going to be needing it straightaway. Tony when it's been triggered, for the started off, you need to put a div. And he says a class of modal fade, ID equals whatever you put here. So off of modal names, I'm just gonna copy and paste it.

Make sure don't get any errors tab, index equals minus one. Role equals dialogue. That's essentially what it is. Now we're gonna put area just labeled boy equals This one is gonna put to the mind mode mean mode or name label wherever you want really area dash, hidden equals true. And now inside here, we're gonna need a negative and this has a class modal, dash, dash, dialogue, row equal document. And its idea doesn't never did that our call or deal but once you got it set up, you can easily just copy and paste the cluster be a link in the description to the source code from this video.

You can check that out. You can't be bothered to do it. Oh, if you just need a quick reminder of a class modal dash content, you don't really need to worry anything head about what's going on here we saw handled by bootstrap audits let you know where to basically start pouring your content. So, first of all, we just got a bit of set up today, which is what we're doing now. Again, we just need another div these divs ever gonna end, hopefully very soon. modal dash header inside here, idea, we're gonna have a Nope, no Dave, and I have a button and this is gonna be for us open up the sono system website.

It's gonna be this little x right here cuz you can click off it, I mean, click outside of it, or you can click the X to close it. For this button type equals button class equals close your bootstrap. So we don't need to worry about this on the data dash. Dismiss equals modal area dash label, not equals dash label equals to lose and in here we are going to pour a couple of span so for the first span grabber butterfingers today Erica she didn't you call true for this we need Sun Times semi colon. Don't worry this won't appear, the actual x will appear itself span and the final one is for screen recorder. So for class equals s or dash oni and in here we'll close and now outside of the button, we're going to put the modal title.

If we just go back to our website, click it as you can see the button and the title or within the Same section, they don't have to be you can put them wherever you want. It is very flexible, but it's going to keep a general format because it looks very good. h4 again, don't bite for it but really wherever you want, but pay for looks pretty sweet. Class equals modal dash title, ID equals two. And for the ID No, get the area labeled boy. So this is what we're using this for.

Copy and paste that here. And we're gonna put this modal on Cool. Awesome title is smiley face and then outside of this div, basically stored in the con mold or content div by side of the header div. We're going to add another div. The div will never end in Class modal dash body. And in here we're gonna put some run text.

But before we do that, it's going to finish off the modal control the random text is going to Google random text generator. Finally was going to put a footer don't have done footer, but photos are cool as well plus, we're going to show you how to do it and then you can choose if you want to omit it, if you do, just simply remove this div if you don't want to head up, I mean, they're stiff don't want a body removed this dead simple as that. And inside here, we're gonna have a button and the button is gonna have a type of button. Class btn btn secondary data dash, dismiss, too many SS equals multiple Basically this one is going to close the modal. I was going to copy and paste this to save some time. And then didn't want to do that.

This button is simply going to do nothing it's going to show you that you can easily add a nova button. Because too long some arms gonna put the text of extra baton, save that go back to our website, click contact us there you go we've got a button right here. So this is an extra button allows us or the user to trigger an event in this case it's contacting or trying to send us an email and if I click it gives me a warning saying please fill out all the fields filled must contain a valid email address morphing it had to do this. This is totally separate. These are alerts which we've covered in a separate video so go check them out if you're interested. So in the body locks everything going to put a random paragraph random paragraph generator.

See what we get? Yeah, seems okay. Yes, degenerate into the sufferer. Yes, fine. So copy and paste that. Okey dokey save it.

And now if we go back to a web page, refresh, no modal has appeared or is on the page because bootstrap knows not to basically show it. So if I click open, modal, modal, modal, modal, as you can see our awesome modal has appeared or total or some body text. This button does nothing. Click this closes the modal click outside of the modal closes, click with the inside it doesn't close the click Close the modal Close it, it's going to show you a couple more things. I promise there are no more deals anymore. If you want to change the size of it, instead of accessing CSF, there's some built in classes.

So if we just go to the div class modal dialog and put modal dash LG for large, before I refreshed and can show you this size, so this is just the regular size, refresh, click on this, add in see this is a larger size. What I'm going to show you if I were to resize the web browser, models are responsive, which is really cool. Don't need to add them into a column with X amount of width. And you can also change this to SM which is the small modal. I'm going to keep it as the normal modal. And finally, maybe you don't want the fade animation you can easily remove that by removing the fate class.

From here, save And before we refreshed for clicker I didn't see fade in any slides down before refresh, click it, it just appears. I personally prefer the fading version because it's more elegant look more professional doesn't look bland and static. But if you don't do that maybe you want to create your own animation can easily do that by removing the fade class mapping and put it back in their curves. Like said this source code is going to go on GitHub, and there will be a link in the description to that. So check that out. Please rate, comment and subscribe as it really does help keep the content free.

Plus it also really helps us understand what you like and what you don't like. If you have any questions, feel free to post them on sonar learning duck code at UK forward slash question dot php. There'll be a link in the description to that. And as usual, thanks for watching, and I hope you have a great day.