Dialog box to display message and take user inputs using JQuery
Modal box displays content which are top most important to the user at the moment. For example the user wants to login to the site, then the modal box will show login window for the user to enter userid and password. All other activities are disabled till the job displayed in modal box is completed. User can close the window and return to main page. We can show warning , alert message and confirmation message through this Dialog box.
Here is an example of a simple modal box with a close button at right side.
JQuery UI Dialog Box
Modal and Dialog box difference
Modal window won't allow user to perform any other task other than its own. Dialog box works on similar way but it is another layer which works above the main page.
Both have close button to return to main page.
Let us start with a simple dialog box which shows message on loading of the page, you can use such type of box showing any advertisement or asking user to signup of for newsletter.
DEMO: Showing Dialog box on Page load →
Instead of showing the dialog box at the time of page loading we can show after some time delay. Let us set the time delay to 4 sec but you can change this to any other value. We will be using setTimeout function to create a delay of 4000 milliseconds or 4 seconds.
DEMO: Showing Dialog box after some time delay →
We can add animation effects while displaying or closing the dialog buttons. There are several animation effects available and you can use any animation effect from this list.
Passing data to
DEMO: Adding animation effect to Dialog box →
We will ask user to enter record ID in a text box. On submit we will use this record id as input to get other details of the same record. We will pass record id to our backend PHP script data.php. This page will receive the request id in GET method and process for collecting matching record from database table.
The code for backend PHP script is here. DEMO: Showing Record Details in Dialog box →
Showing details of a record ( By selective button click )
The backend PHP script remains same as above. Now we will display all records and each record will have one button for user to click. All the buttons will have common class but each button will have its own unique value as student id. In our JQUERY we monitor which button is clicked by using attr() function. This student id will be collected once the button is clicked by the user.
Using this attr() value we have created the url and load the same inside the modal-body.
This value we pass to our background PHP script data.php to collect all other column values of the record using the id.
Let us ask user to enter some data inside dialog box. We can keep input boxes inside a dialog box and pass the data entered by user to parent page or main page on submit.
It can be one input box or a set of form components which can be passed to main window for further processing.
In our example we will keep a form to collect inputs from user and the same data we will insert to our student table. To add record to student table we have used backend PHP script data-add.php . This script collects user input from dialog box using GET method. Then connects to database and insert the record. After successfully adding the records it reads the newly created auto increment id and returns the same to main script to display success message.
DEMO: Showing signup form to collect data and store in database →
Using Edit options for the record
We can add one edit option to records so user can change / update the records. Let us say we want to change mark of the student. The nodal box will display the present mark and allow the user to change this to a new value. Once submitted the new value will be reflected in parent or main page by reloading the page.
First we will display the records ( we restricted upto 10 records in our DEMO ) and each record will have one Edit button. For all the records the edit button will have same class but different value. Each button will have student ID as their value.
Once user clicks any one Edit button, the button click function is triggered.
Inside this function we kept code to open the dialog box and to read the value of the button which is clicked.
By using load we will display the record details of the particular id in our dialog box. You have already seen how to display record details in a dialog box here. This time we will display student mark inside a text box so user can change the mark and update the record. This creation of form with input box for mark is created inside data1.php file.
After user enter the changed mark and press submit , data will be collected in main script and by using POST method it is submitted to data-update.php file.
The data-update.php file collects record ID and mark in POST method and update the record. After updating the record it print success of failure message back to the main script.
DEMO: Showing text box to Edit user input data →
We will display this message to user and refresh the page to reflect the new or updated mark of the student.
While refreshing we kept a time delay of 3 seconds ( 3000 milliseconds )
for immediate refresh.