FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.1 Modal & Progress Bar

The modal dialog box has a lot to offer and now it’s time to have a play with it and see what we can do. We’ll also apply a few callbacks. Then I would like to use one of those callbacks to integrate a progress bar that animates once the modal dialog box is visible.

7.1 Modal & Progress Bar

Hi guys. Welcome back to getting started with Semantic UI. And in this lesson, I want to take a look at finishing off the model dialogue box, and taking a quick look at the progress bar. So, the first thing I want to take a look at is the actual model dialogue box in the content section because everything looks really nice. But, we do have a little bit of a problem here, where our image is very, very small. Now, we can adjust this in the browser to show you what's happening. And, I recommend you do this from time to time because we can get a little bit confused. Here is the CSS selector. You'll see that it's actually being displayed as a table cell, and it has a minimum width. If I take the minimum width off there, you'll notice it gets a little bit larger. Then also, I can set the vertical alignment to the middle, not the center. Remember that it isn't the center, it is the middle. And, it will actually set that up vertically in the middle, that's really nice. So, what I'm going to do is copy that selector cuz all the hard work has been done for me. And, we want to take a look at the main.css file. And, we can paste it underneath the contact page comment. And, I can just paste that in. Now, I need to play a game of top trumps, which means I need to overpower it. So, all I need to is just say div. So, that will overpower it cuz now we're targeting a specific element with those two classes. And that way, it will overpower the previous selector. And then, we can start to modify stuff. So, let's put in a minimum width of 250 pixels, which I am setting a pixel amount, which is fine because it's not that large. And, it then ensures that that image is going to go to the correct size because that image is 250 by 250. Then also, I'd like to set the vertical alignment to the middle. If I save it, and we go back and hit refresh. You will notice that we will get exactly the same result. So now, it's time to work with these two buttons down here. And, I want to see how we can work with them in terms of the call back. So, let's view the script.jazz file again. And, there's only so much you can do in one method. So, let's go down onto a new line, target that model dialog box. And again, you don't want to be using classes if you have more than one modal dialogue box. And then, we want to say, model. And then, we want to pass in our object that then we could pass in, you know, for example, our settings. And also, the call backs as well. So, we're gonna say undeny. So, undeny will look for an element with the classic negative deny or console. So, I can just copy that and we can paste it in here. That is the property and the property has the value of a function as in a call back function. And then, I can simply write something to the console. So, I can say console.log, and then I could say deny. So after that, just end it with a semi colon. And, to make this more legible, I think what I want to do is just sort of bring this down like so. And that way, it makes it a bit more easily readable. So, we have undeny is going to callback this function, and it's gonna say console.log deny. Hit refresh, open up the console, and let's go ahead and click. And, you will notice that right here, we have deny. And, I'm just gonna skooch this up because we'll be doing a bit of consult work now. So, we have deny. Then, also you have the other callback, which is on approve, which will look for an element for a class of positive approve or okay. So, let's put in a comma in here and we're gonna say onapprove. And, we want to bring in a call back function, just like so and let me just copy this out. And we say, approve. And, oop, that's missing one P. And go ahead save it, and then very quickly refresh it. And then, we want to take a look at this now. I'm going to hit agree. And, there you go. It says approve. So, you know, you could do a whole host of other stuff. And, if you wanted the window to stay open, so for example if they hit disagree and you didn't want the window to close. You could say that if they click on that on deny, you could say return false, which will stop it from actually doing its default behavior of closing the model dialog box. So, if I hit refresh and now we click on disagree. It says deny, deny, deny. You can see it's adding up, but it's not allowing us to close the dialogue box until we hit agree. And then of course, we can take a look at the styling as well. So, I don't have to stick with that type of model dialogue box, all I have to do is add on the class of basic. And, it will give me the basic styling as well. So, let's go ahead and click. And, there is the basic styling. I know it's not the best of stylings right there, but, but you do have it. Okay? It is possibly needing a bit of work. Maybe, it's because the footer in there is higher or something like that, I have no idea. But however, that is the model dialogue box. And it work, it does work very well. It just seems to end here on footer. But, it's very, very nice looking to be honest. All right. So, we have that and also just to make a point, we could change this from positive to okay, save it, go back, hit refresh. Scale this back in again, so we can see this guy. And, we are going to click on AGREE. You'll notice it's not got that green styling on there cuz it's not positive, but it still does call back on that. And, also you could have another one as well, which was approve. So you have, you know, lots and lots of options to choose from. You could also hide the model dialog box from within the model dialog box. So, let's say that I have a link. So, I'll have a link right at the end of my paragraph, I'm going to add in an anchor. It's not really gonna go anywhere and it's just gonna say close. And then, I'm just gonna stick an ID on here so it's easy to reference. So, the id will be closemod. Copy that id, save it. Go to script.js, and we want to target the element with the id of closemod. And then, you can say when we click on it, we want to run a function. Now, this is one way of doing it. So, I could say click, run a function. And then, what we want to do is take a look at some of the behaviors that are available to us with the modal dialogue box. So, I can run the model method, so what we're doing here is we're saying once we're clicked, run a function, target the model dialog box, and then run the model method. And then, you have all sorts of behaviors available to you under Usage, and let's just say hide. Or, you could even say toggle if you wanted to. So, I'm just gonna say hide, pass it in as a string. Save it, and we if go back over and take a look at this now. I click on close, and you'll notice it goes away. Now, that's one way of doing it. The other way is, of course, doing it the way we did it before, which was like this. Which means that we're attaching an event onto that model dialup box, and I'm targeting the element with the id of closemod, and I want it to hide. Let's see if that works. I can save it, hit Refresh, open this up, and close it like so. So, that's really how the model dialogue box works. There's so much available to you. And, the last one I'll show you is changing the transition cuz I don't really want that to transition. So, you can see here, the default transition is scale, but under Examples, we had quite a few. So, for example, we have the horizontal flip. Let's go with that. That looks really nice. And, you can see here how it works. You can say, model setting, transition, and then you can put in a value. And, this is because it's using the ui transition. So, if I am to just copy that line out, and then we can target the model dialogue box again by its classes, and then paste this in. We are saying settings, transition, and the value will be a string saying whatever we want. So, it can be a horizontal flip. Save it, go back over into the browser, hit refresh, and now we get that nice horizontal flip. Wonderful. So, have a play around with it, with all those settings and what not. Now, I've done it this way just to show you in a nice, presentable manner. You should never really do this because we are unnecessarily fetching things from the dom. In fact, you can see here this is the first time we target that element. So ideally, as these are all the same, what we can do is just start to cut and paste them out. So, that was this method right here. So, I can just take a look at collapsing that. That's the first method. It ends there. Then, we have another method. Then, we have another method, and so on, and so forth. So, we have that wonderful chaining, and with the chaining comes less work for the jQuery selector engine to go out there in the dom, and try and find it. And, you'll notice it'll work just as well, but now jQuery is having to do less work and we get exactly the same result. And, you can see there, that the DISAGREE is not closing, so we know that that call back is working. So, take a look at all the settings and options. Play around with them. Have fun. It's a wonderful little module. Also, the advice on the chaining can be introduced with the previous code. Again, I'm just doing it for presentational reasons only, just to make things nice and clear, but use that chaining. I can't stress that enough. So after that, I want to take a look at the progress bar. So, if I review the documentation again, I open up the menu underneath Elements, you'll find progress. Now, the progress bar you can see here is animating, but that doesn't happen by default. You do need to add in some extra code. But, there is a standard progress bar. Then, you can have active as one of the states, which adds that nice, glossy overlay. Then, animates. Then, we have successful, warning, and failed in case there is something that has gone wrong. Also, you have disable as well to temporarily disable it while it's out of use. Then, you have some variations. So, you can actually attach the progress bar onto a segment, which looks very nice. Also, you have the different coloring, like so. And then also, you have striped as well. And also, the stripes can be animating, like so. So, you can see here that we do have some animations going off. Now, if we actually inspect the live dom, we can find out that in fact, an animation is being applied through the CSS on the semantic.css file. But however, is this isn't in your semantic.css file that you download. This has actually been created, so unfortunately, we can't really use the animation. But, you could try and, you know, obviously copy it out but I'm not gonna bother with that. Let's just, first of all take a look at putting in the progress bar, so it's all done through the dom. And, I'm just going to add it into my model dialogue box. Right hand side content. And, I can put in a div with the class of UI. We want it to be a progress bar. And so, we're going to put in progress. We're gonna make it striped, so we're gonna have those nice stripey effects. And, if you say active and striped, it will animate the stripes. Then inside of there, we want a div with the class of bar. So, that's the bar itself. And if we don't set the width, you won't be able to see it. So, I'm going to say style width. Equals 100%. Also, what I'd like to do is make the color a nice green color. So, if I save it and we take a look at this inside of the browser. Open up the model dialogue box, and you will have your progress bar. This is the default behavior. It doesn't come as the animation as standard. So, one thing you could do is take off that style attribute. Give this an id, but we can just use UI progress since this is the only progress bar in our site. And, let's take a look at the model, and what we can do is have a call back on show. So, this will call back a function when the model dial up box appears. And then, I can target the element with the class of .ba, and then I can run the animate method. And, this first argument is an object where we can animate multiple properties. In our case, it's width 100%. And then, the second argument is 1300, which is 1300 milliseconds to animate to 100%. You also want to put in a comma right there, so that the other properties don't become invalid. So, if I save that we go back and we hit refresh, open it up, it will then animate in. So, thank you for watching me in this lesson, and please join me again in the next lesson where we'll draw a conclusion on this entire course.

Back to the top