Bootstrap 4 Tutorial: Modal Popups Made Easy


do you want to use Bootstrap Modals properly? In this video I will show you the easiest way on how to do those, so, stay with me. Before we actually dive into the code I want to show you the basics that you need to understand so that once we start writing the code it will be so simple for you so Bootstrap modals are those small pop ups that will be on to your page so when you click some button or do some action they will jump on your screen and you will be able to take some actions so in order to create those we first need to define that we want to have one model okay now each of those modals have only three things so you just need to define heater okay then the body and then the footer so usually in the footer we put some buttons like clothes okay here we usually put some title okay and then here this is where we put the body of your model so before you actually start creating those always remember we need to define model we need to define title body and the footer and that’s it so let’s write the code so now I’m here at my PHP store and the first thing that you are going to do of course told us create some basic layout so let’s say so we all shop modals okay and then and then we need to include of course the boss of libraries so I will just go to get bootstrap calm I will go to the download and then we need to include the CSS after that we also will need to include the popper and boosts admin DOJ’s okay so I will just add those two at the bottom and then of course we will need to include the Drake query now as you can see they are offering us here the slim version but usually when you do that later you will have some problems with missing functionality so I always suggest just include the full version and you won’t have those issues so let me just quickly for me those
okay so that’s all we need to do and now we just need to define the basic bullshit document so I will say that we are going to have one class container in that class we are going to have one row okay and in this show we need to have some columns now that’s something that I have been explaining in my previous video tutorial so if you haven’t made sure that watch that one so that you understand the grid system in the bootstrap and then let’s see I will just have one like this okay so this doesn’t mean I think if we refresh there is nothing at the moment it’s just the layout okay so now let’s first define some model so I will say okay we are going to have one model and then I want to define what type of animation we will use to show it so I’ll just say faith okay and then I usually declare some I live for this model so if I have more than one I can easily identify those or if you have only one for the button that will show the model you can just say dot model but it’s good practice just to use the ideals IDs so let’s say my model okay now inside this one we need to define that we are going to use model dialog okay and then inside this model dialog like I said we need to three things it will be model heater mortal body and model footer so let’s see model heater I will just quickly duplicate shall see body and footer okay so okay and then in the heater I will say here I’d say h1 let’s it does title for now here I will say this is the body and then here we are going to have some butter so I can just say input class and then I will just define some button let’s see button default and I can say value to the close okay and that’s it but now when we refresh this page you can see that still there isn’t anything on the screen and the reason for that is that by default our modals are not visible and we usually show those by clicking on some button or by doing it from the code usually from the jQuery so let’s see down here I will just declare one button so let’s say 8 prov let’s say nothing for now so I will see data toggle okay model and then the target is what model do we want to target so like I said usually the fight so I’ll say my model and that’s it so let’s see open model and now let’s see what will happen so now there is but an open model when we click so something is missing let’s see we have model we have more dialogue yeah we need to have model content okay and in the model content you will just put here body and footer okay so let’s see now it should be better yeah now it is looking good so now as you can see i I’ve said that I want age 1 as my title this is body this sum button but it doesn’t do anything for now and then this is small pop-up if we want the bigger all we need to do is to change the size of this so if you remember I said the last time that we are able to do it for different screen sizes so if we change that you can see now it is large okay and now of course I can go and just change it or if you don’t define okay if you leave it like this it will be default size which is this one okay and now for this button in order to close the pop-up we need on our button this one to declare data dismiss okay and you will just say model so let’s see now click it will close okay cool and if you want you can just change the classes and the button will be different okay as you can see it works properly but now the question is how can we open this model programmatically from our code for example when whenever we want and also how we can close it from the code without having like those buttons so in order for us to open it we will need to declare first I will stay here correct I usually say text JavaScript even if it’s if it’s not necessarily but that’s how I love it okay and now let’s say that on the document ready you will declare some function and then let’s say for now I will just set some time out okay some time out let’s say we will wait for two seconds and after that we want for whatever reason might be let’s say want to ask the person here like what is your name I mean it doesn’t matter I can say here for control and that’s it like something simple so how are we going to do this all we need to do is to use the ID of the model so I can say here my model dot show and then here no model and then we need to just say show or if you want to hide it you will just say here hi it’s so simple so let’s try now after two seconds the pop-up is here and it’s asking us like what is your name okay and then if we want to close it so let’s say I will define against some time out like this is just an example it’s not functional but let’s say three seconds and then here we just need to see my model dot model hi and that’s it okay so let’s refresh after two seconds it will show and after three seconds it should close okay there you go so simple so easy and yeah pretty much that’s it I hope that you understand this it’s simple it’s easy but it’s very useful in your project so guys if you have any questions please ask them in the comments below and I will make sure to answer all of them and if you like this video please like it and shape your friends take care

28 Comments

Add a Comment

Your email address will not be published. Required fields are marked *