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.

Options of Dialog box

The most important options is Positioning the dialog box at different locations of the screen.
Tutorial : Positioning of Dialog box

Display Dialog box On Load

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
Source code.
<div id="my_dialog" title="plus2net  dialog">
  <p>plus2net.com JQuery  section.</p>
</div>
The Jquery Script
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: false
});
});
$("#b1").click(function(){
$( "#my_dialog" ).dialog( "open" );
})
})
</script>

Dialog box after a time delay

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

Opening on button click

We can connect our dialog box to one button so user can click the button and display the dialog box.
DEMO: Showing Dialog box on Button Click

Confirmation Box

Asking user to confirm the action by clicking Yes or No button
Tutorial on Confirmation Box

Add extra close or submit buttons.

We can add extra close or submit button to the dialog box.
DEMO: Adding one Close button to Dialog box

With input box & submit

We 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.
DEMO: Dialog box with form to Pass user data to Main page

Adding animation effects

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

Passing Data from Main page to Dialog box

Enter 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.
DEMO: Passing data from main page to Dialog box

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.
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.

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
DEMO: Showing Record Details based on Click of Button by user

Create a signup form using Modal

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.



Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer