Bootstrap modal box has three parts as shown in following figure:
- Header part of Modal Box is used to display title or caption of the box.
- Body part is a place where message or user interface is defined.
- Footer part contains buttons to perform actions such as to submit form, save data or simply close it.
2. Create the Modal Box
In this section we will create the modal box. Our modal box is very simple. As for now it contain only two fields one for accepting user’s full name and other for e-mail. I am not covering much in this tutorial as it’s just the starting of the series. My modal box also contain two buttons, for submitting form and for closing the modal box if user wish to.
3. Launch the modal box
After the modal box is defined, we need a button to launch it so that it may appear to the user.
4. Create section to display user’s submitted data
The interface will look like following
And when user click the button, modal box will appear as illustrated in following figure
Following points help you understand code:
- The click event is attached to submit button using the id of form #modalContactForm and button’s class .btn-info.
- Value from text boxes has been extracted by using their ids #fname and #email and stored in variables vfname and vemail.
- After extracting the values, it is sent to PHP page in the parameters fname and email.
- And finally the response to the user is displayed in the div having id #result.
6. Create PHP file
The PHP file is a place where user's information is received and processed. In this tutorial I am only displaying it using echo function. In my next article I’ll show you how to store it to database.
Run the form, and submit values. The result is shown in following figures.
8. Task for you
Follow the links given below to discover more on Bootstrap Modal Box and styles you may apply
you may also like to read article on my favorite list of websites that teach you web development
You can download the source code for this article here:
Timothy Malche (author) from Jabalpur, M.P., India on April 16, 2019:
How to Use Bootstrap Alert With Php to Display Dynamic Information to User?