Responsive Modal Popup using Bootstrap & jQuery | Krishnaa Kumar | Skillshare

Responsive Modal Popup using Bootstrap & jQuery

Krishnaa Kumar, Your Best Mentor :-)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (15m)
    • 1. Introduction

      0:34
    • 2. Bootstrap Package

      2:25
    • 3. Button

      2:38
    • 4. Popup

      4:21
    • 5. CSS

      3:28
    • 6. jQuery

      1:47

About This Class

Hi Everyone,

In this class, we will create responsive modal popup using Bootstrap and jQuery absolutely from scratch.  Make sure, you have some basic knowledge of Bootstrap and jQuery.  If you don't have, then you can simply follow along because creating such modal popup is very easy.

I am going to use Sublime Text as my text editor and will test web page on localhost using XAMPP.  After finishing the class, you can download the project and modify it as per your need.

Transcripts

1. Introduction: Hi, everyone in this class you learn how you can create a responsive more that pop up using boots. Stop and degree. This will be a final output on the click Overton. You'll get the pop up. Also, only paid a fresh or you can see the page note. You will get this pop up. This will be completely responsive. You're going to this. Make sure you have some basic knowledge of bootstrap and G equity. If you don't have, you can simply follow along because skating such model Bob is very, very easy seeing the class. Have a nice day. 2. Bootstrap Package: he's able to step up site to get started. First Folio to download the package that simply click on this button and you're Donald will start after that, you have to go toe dickering upside and your download this package, I have only utensil. And after extracting the goose step package, you will get this folder this folder and this fold up and make sure the degraded file should be in this for love. Okay, when you are done with this, you can simply put them in a boat. Steph Older like this. You got all your content in one folder? No. In the basic template to the head, the website off the board step where you can find the basic template. And this is the camp. It was simply to copy this and based it on these of lime text. You can see you already got a reference for the bootstrap files. But since they are in the would step fold up, which is this one year to make little tea in his hail. Make it bootstrap. Just copy this person over time. Best Rick Hill and kids are degrading. We need the final aim. But in this case, is this one? Just simply copy the file him and replace this here. Make it DRDs and copy the part with his bootstrap. This one and baster tail. Make it J. Grady. So we're done with it. Just save this file, and we won't ask this on a local host. Refresh it. And this is your book. So we're done with the download installation process off our boots. Step in the next video. We'll start with the recording process. Civil X radio. Helen, I straight. 3. Button: I owe you one mystery will create a Britain first. No, it's too late. This piece of court Because we don't need this on cuter development. Give you the class name off. Couldn't do you. No. Great. One more development tail you glass Name off. True. They will be one more development tail and give it a class name off called out of G. Not execute a burden here using the important element. Plus we'll be beauty and beauty and primary. And it will be a small button. Text will be show pop up. Just say of this. Go to browser Two fresh shirt and this is the output. But I wanted somewhere here in the center That's good. A new flight. I consider it as my style dot CS is now go to estimate foil and copy this Be Esther too. And make it my style. Shipped the name and the name in this case is my style dot CSS Save it in the row class had one book last my mortal. Save it. What? This tile shoot. Select my model class and explain this case will be santo. Just save this Goto browser. Refresh it And this is the awkward to regard Obertan The next video We'll work. Oh, the moral section, See the next video? How a nice to 4. Popup: Hi, everyone. This would you look over the mortal pop up excluder development? Tail class will be model and you want a fading effect will make use off fate class. You're to provide area to the mortal. So in this case already will be pop up. Morning. DAV index will be minus one. Create one more development here class will be mortal dialogue and you want a small pop up . So it will be modelled sm create one more development class will be mortal content. Now we need a heard A section, so there will be a development with a class Mordo, head of we need a title. So in this case, make use off a stew element and the battle will be my product. Now go to Burton Element and make use off. Did you will attribute? It will be mortal and your target will be this one. Just copy the I D and make use off hash and the idea. Save it. Good. Broza Refresher Click on the button And this is the awkward No, I need a body section. Go to court file development. Ill plus will be mortal body when you do Dick Mark. So in this case will make use off a span element. Close will be Cliff Aiken and the another class will be Cliff Aiken. Okay, Now, let's make use off label element here, feature one. Just copy this Mr Kill deal here and make it do three full and forth. Caldwell's fresher click on this button. And this is the output as a node. Start looking dicked. So we have to fix this. We simply toward a break here to have them in a separate line. There it is. Not quite, I think. Save it fresh it. And this is the the real work over the for the section get a new element tail Plus will be mortal photo. There will be a span element and next will be need more in there will be anchor element It will be hash and the text will be click here. Save it, Rosa. The pressure it And this is the awkward. So we're in with the model pop up regard the heart section, Maury section and the photo section. The next video we'll walk over the style. Shoot your story is them properly and to have a nice background see in the next year Deal. How would I stay 5. CSS: how everyone in the studio local diseases, while just to enhance the appearance off our mortal pop up, Go to a stable file and very close here. Last name will be my Bijie. Save the festival file Goto CSS file Select my DJ class in background color in this case will be RGB 16700 Save it. Goto browser Live pressured. Click on the button And this is the output knowledge in the color toe. Wyke, make use off. We left here. I see it professed Eva Page, click on the button. And this is the output. So we got the background. And Texas now, why didn't color 16 this tick mark Toe green? We can make use off line color nie estimate file Reddick los here feature. Just copy this baster to here, here and here. Save it. Go to style. Shoot. So, like the feature glass, they make the color like save it Festiva page, click on the button. And this is the output. No, we need some spacing here. Select label element. Make the margin left 10 pixels on increasing form size to 15 pixels. Save it, Refresh it. And this is the awkward No, we need to modify this one. We have to line this in the center and we are putting this color toe white. Let's elect model for Douglas. We did extolling center here. Save it. Two fresh. It nice. No. So, like the and relevant Make the color white Big difference board. Save it, fresh diva bitch. And this is the old. Or you can do one thing. You can make it yellow because that will look much better. Nice to see the final output after applying all the styles. And you can see this pop up is only loading when you click on this button. Our goal is to load this pop up on the page load. So we have to work with the G o Grady for this. Really? Just pretty much enough to know how to apply the styles. In the next video, we'll walk over the Duke. Ready? See, the next year Deal. How? When I stood 6. jQuery: Hi, everyone in this world Local village equity Just a loader Pop up on the page, Lord as off. Now, when you click on this button, we're getting this pop up, but on the page too fresh, we're not getting it. So our goal is to load it on the page load. Can't go to file and guard this and Hastert something Hill. Now, when you descript makers off, script that and make yourself document ready function. Just dilute this and this one out. Take the idea off your pop up. This one. Make use of cash any more than function. We want to show this so it will be sure and see you're done with this. Now go do Broza were fresh it And this is your problem. You can see we don't typically Conte Button, it'll pop up again. So it's your choice. Which approach you want to follow. You want to go with the but if you click or you want to load it on the page. Lord, there's the final output and we're done with the project. See the next video? Have a nice day