Dialog box to display message and take user inputs using JQueryModal 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.
Modal and Dialog box differenceModal 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.
Options of Dialog boxThe most important options is Positioning the dialog box at different locations of the screen.
Display Dialog box On LoadLet 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. Source code.
The Jquery Script
Dialog box after a time delayInstead 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.
Opening on button clickWe can connect our dialog box to one button so user can click the button and display the dialog box.
Confirmation BoxAsking user to confirm the action by clicking Yes or No button
Add extra close or submit buttons.We can add extra close or submit button to the dialog box.
With input box & submitWe will open the dialog box on click of a button and show two input boxes for users to enter text. On submit of this box we will carry the data entered by user to our main page and display them inside a layer.
Adding animation effectsWe 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
Passing Data from Main page to Dialog boxEnter Your name in a text box of main page, then on submit your name as input will be taken to dialog box and displayed with welcome message.
Showing details of a record ( by entering ID )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.
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.
This id again we will pass to backend script and collect the record details ( like above code ). The return data is displayed in side the body of the modal
Create a signup form using ModalLet 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.
Using Edit options for the recordWe 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. 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.