A modal box is similar to a conventional dialog window used by web and desktop applications. It appears as a response to an event. For instance, when a user clicks on a button then the click event is launched. This modal box can contain some buttons to launch different events or actions, and it is useful for offering different choices to the user without leaving the current page. The appearance of the modal box is not the same as the rest of the widget of the page. It is showed with a black background color at the bottom of the page. We will look at the process of building these kind of widgets in this recipe.
Getting ready
We go back to use the UiUIKit framework as it includes a specific widget for building this widget.
How to do it
As we have seen in the previous recipes, we’ll include the reference to the CSS file of this framework in our new HTML file. To refresh your memory, here is the line of code to do that:
The second step will be to create a simple button for launching our modal box:
The next step will be to create our modal box using the following code:
Remember, our new modal box will be launched as a response to an event. We need some JavaScript code to respond to it. Insert the following lines in the head section of your HTML file:
Now it’s time to click on the green button to see our modal box working, as shown in the following screenshot:
The complete code for this recipe can be found at code/ch02/buttons_panel. html in the code bundle.
How it works
In order to create the button for launching our modal box, the UiUIKit defines a link element with a CSS class called button. You can choose the color for your button using a predefined CSS style. We chose the green color for our recipe, but the stylesheet of the framework allows other colors such as white and black.
We need to launch the modal box when the button is pressed. This is the reason for using the onclick handler event on the HTML link of our button. We built a simple JavaScript function detecting the current value of the property display of the modal box. This one is hidden by default when the user loads the page and will be shown after clicking on the main green button. In fact, the JavaScript function works as a toggle component. The only parameter of this function is the id of the modal box and it is used to find out the value of its style. display property. You’ll observe the use of the getElementById method of the document JavaScript object, which is defined in the browser following the DOM (Document Object Model) model. It will be considered a native feature of the Safari Mobile browser used by the iPhone and the other Apples devices. Desktop browsers—based on the WebKit engine—such as Google Chrome and Safari contain the same feature for accessing HTML objects through the mentioned DOM model.
The modal box itself is created using a specific div element with a predefined id value called optionpanel. Taking a look at the style attribute of this element, you’ll find its value indicates that the modal box will be hidden by default. Inside the div tag, we’re using a set of links for representing different buttons. Each of these buttons has a color defined through the class attribute of each link.
In the real world, the href attribute of each button should contain a reference to a specific action. For instance, we can get a value to put on a text field. Once again, you’ll need some JavaScript code to do that.
See also
► Installing the UiUIKit framework recipe in topic 1, Frameworks Make Life Easier
