FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.9 Finishing the Form & Adding a Modal Dialog

Hi, guys. Welcome back to Getting Started with Semantic UI. And in this lesson, we want to take a look at the modal dialog box. But first, I want to finish off the form. So we currently have a styling issue with the form, which you may have picked up on in the last lesson. But if we go ahead and submit it, you'll notice everything works fine, but the loader is a little bit too large. So under the contact.php we're gonna take a look at the form dimmer and we want to take a look at the loader that's inside of the form dimmer. And we want to take off large and make it small. So if I save that, go back, hit Refresh, that will solve the problem, there we go. The next thing is the errors. So, we need to enable validation again. So, with the validation variable, you can see that I commented out the validation. So, let's go ahead and put the validation back in again to make sure everything is still working. We can hit Refresh, hit Submit and we have errors. Now we also have this down here which is a little bit of a problem where it's pointing upwards to absolutely nothing. Now if we inspect the code, you'll see what's happening. It's automatically injecting this label right at the bottom of the field, and the field also contains the button as well, which is fine. There's nothing wrong with that. The label is sort of in the correct position. But is only in the correct position if the pointer is facing to the left-hand side. So, I want a custom label for this particular field. So, the way that I actually solved the problem is by manually putting in my own field. So let's go ahead and take a look at this field here. So we have the checkbox and I could put the div right below the bottom, but I'd like to keep everything together, because the only error prompt we're gonna get is for the input, which is a checkbox. So let's put in a div and it needs to have a few classes on here, ui label. Let's made the label red. Let's say that this is a pointing label. And we want it pointing to the left hand side. Now the most important class here is prompt, because the script is gonna look for a div element with the class of prompt. And prompt is meaning that this label is ready for an error prompt. So we can just leave it empty or if you put content in it, it will be erased. So, for example, if I save that, and we go back and hit Refresh. We now have our label in here, but as soon as I hit Submit, it will change out the content for whatever content you need to be. Now, you will need to consider you know, when you resize the browser, are you gonna need to think about how you are going to tackle that problem? You may even want to take out the label at that point and say, please agree and just have that pointing to the checkbox. But what I want to do now is just focus my attention on making sure it is hidden, first of all. So we're going to get rid of all of those As right there. So even though if I do that, it's still visible, and so now we want to do is just hide it. So if I set this to hidden, it will cause another problem. So if I save that, hit Refresh, and hit Submit it doesn't show up. Now even though it's still working, the user can't actually see it. So what we need to do is take a look at the field, because the div for the class of field also gets a class of error when the field has errored. So in that case it's the checkbox hasn't been checked. So let's take a look at main.css. And we're gonna target the field with the class of error. So we're gonna target the element with both the classes of field and error. Look inside of there for a label that is hidden, and also has the class of prompt. And then we want to say display as not a block level element but an inline block. Don't forget, it is an inline block, not a block level element. Now this still won't work even though it should. So if I hit Refresh, and hit Submit, it's still not working. So let's inspect the element and find out why it's not working. So, we have the field, then we have the div, which is the label. And you can see here that we have a lot of the exclamation mark important on the values. And if you take a look at display, it still says display none. And we have the important in there. So that's why it's being overpowered. So what I want to do is also put that into the value of this CSS property, save it, go back, hit Refresh. Hit Submit and now it will work. So it's hidden by default, and it will be visible when there is an error, easy. So, now that we have this and you can see it's working absolutely fine. We want to take a look at addressing the modal dialog box module. So if we scooch on over, you'll be able to see that we have the documentation opened up. So underneath Modules, you have Modal. And then inside of there, you'll be able to see that we have some code to look at. So we have the main div, which is the modal itself. Then we have a nice icon, which is the closed icon. Then we have the header, the main content area that can be split into the left and right sections, and then also you have the actions at the bottom. So if we run the code, you can see, there's the close icon, there's the header, there's the content section. This is the left part of the content section. This is the right part of the content section. This is the actions along the bottom where you can put buttons in there. And, you can also have the styling as basic. So this is just a very, very basic modal dialog box. And also if you were to hit No or Yes, you could add whatever callback you would like. Then also you have a few variations. So for example we have the size. So, it could be small. It could be large. It could also have the active state as well. So, the active state means that it's actually visible right off the bat. But typically you wouldn't actually want to use the active class. You would rather let JavaScript manipulate that. If you take a look under Examples, you can see here that we are forcing a choice, so hit Run Code. And if we say Yes, like so, but if we hit No, then it says, you know, wait, not yet. And the modal dialog box still stays open until we say Yes. You can also approve/deny callbacks. And then, of course, you have your different transitions, as well, that you can take a look at. And there's some really nice 3D ones as well, such as flip horizontal, and also flip vertical as well. But again remember they are very, very experimental, the 3D transformations. Then also you have attach events. So for example, I'm targeting the modal dialog box, and then I'm saying attach events. And we're targeting which element we want to attach the event onto, and what it will do. So we're targeting that button and we're saying that once it's clicked, we want to show the modal dialog box, just like so. Then we have some of the usages, which you can take a look at all of the behaviors available to you. And then, of course, we have a few settings as well. And you can see that there is absolutely loads to go through. And you know, you can play around with those. And also you have the callbacks which is onApprove, onDeny, onHidden, onHide, onVisible, onShow, which are pretty much self-explanatory. And then we have the DOM Settings and Debug Settings. So now let's take a look at integrating the modall dialog box into our page. So I'm just going to scroll up to the top. And let's go ahead and collapse the main segment. And at the top of the page, just underneath the header, I'd like to add in the modal dialog box there, just so I can concentrate on the code, and so I'm just gonna create a div with the classes of ui and modal. This is the main modal dialog box. Now if you had multiple modal dialog boxes, you'd want to put an ID in here to target this modal dialog box specifically. And then, of course, inside of that we need to have an icon. So let's go ahead and say class equals, and we're gonna have an icon. And the icon is going to be closed. Now, ideally you wanna make this icon relevant. So the X is a clear indicator this is gonna close. You don't really want to, you know, thumbs up or something like that, because otherwise the user's not really gonna understand what that is there for. Then we are going to create a div with the class of header. So the header section for our modal dialog box, we're gonna put in a header one. It needs to have a few classes on here, so we're gonna have ui and header. I'd like an icon in the header and we're gonna say class, and it's gonna be icon. And then it's going to be hand right and then also just a little bit of text saying Terms. Then we need our main content section. So let's create a div with the class of content. And inside of there we can have a left and right section, so I'm going to have a div with the class of left. And then in that div, I just want to have an image element. And we're going to look inside the images directory and take a look at the about.jpg file. And then let's have a few classes on here. So we're just going to say UI image, we want the image to be circular. And also don't forget we need an alt on here. So I'll set the alt to about. And then we want to take a look at the right-hand side of the modal dialog box content section. So we're going to say div right. And then we can put some paragraph text in here, which I'll just put in some lorem ipsum. Now below the content div, we want another div. Which is going to outline the footer, but it has the class of actions. And then we'd like to put in some buttons here. So I'm going to create a div with the class of ui, and then we want to make sure this is a button. I'd like a label on there. So I am going to say labeled. Icon as well so nice little icon on the left hand side, and then also I am going to say negative. Now this is the most important class and the reason being is because it's actually looking for the negative class on the onDeny callback. So if we look at the callbacks that we have, you have onDeny and onApprove. So onApprove is looking for the click on the element with a class of positive. So you have negative and positive. And so inside of the negative one I'd like to put in an icon. Let's add a few classes onto the i tag. We're going to say it's an icon and we're going to say it's the close icon. And then we're going to say Disagree. Then I can copy this and paste it down below. And then I can change this to positive, which will also change the styling as well. Negative is red, positive is green. Then I want checkmark icon. And we're gonna say that the label is Agree. So if I'm to save this now and then preview it, you'll notice that nothing really happens on the page. And that's because the modal dialog box is automatically hidden. If you wanted to show it by default, you will add that class of active and then save it. And then the modal dialog box will become active, which you can see there, it's not really working that well. So let's go ahead and take that off just like so. Now let's take a look at implementing this via JavaScript so that we bring up the modal dialog box properly and we don't get those errors. So if I just collapse the modal dialog box for now, below the orange segment, so just below the main segment that wraps around the entire form. Let's add in a div, and it needs to have a few classes on here, because I'm going to make it a button. It's gonna be labeled, and then it's just gonna have an icon, and it's just gonna be basic. So let's have the icon in here. So, let's give it the class of icon and I'll just make it the pencil icon. Then I want some text in here, which I'll say Terms and, which I'll put the ampersand in, but I need to escape it, that's very important. And then we have Conditions. Save it and when we Refresh, we'll have that button in there that we can click on and we can open up the terms and conditions. So if we take a look at the script.js what we can do is first of all target the modal dialog box. Now again you can do it via an ID but in my case I'm gonna do it with the classes. So we have ui and modal, also, and then we're gonna run the modal method. Then we want to in, attach an event so that we can attach an event to an object in the DOM, and then we can tell it what to do. So we're gonna say attach events. Then we're gonna put in a comma. The next argument is which element are we going to target. Now let's give this button an id. We'll call it terms and then we'll save it and then we'll target it. And again, it's using the jQuery selection engine. So we put the hash in here, terms. Then also we want to pass in a third argument which says, what do you want it to do? And we want it to show the modal dialog box. So if I end it with a semicolon, and we Refresh this in the browser, you'll notice that it comes up and, voila, there is our dialog box. So thank you for watching me in this lesson, and please join me in the next lesson where we'll take a look at the modal dialog box further, and also take a look at the progress element.

Back to the top