jQuery UI Dialog

jQuery UI Dialog displays content in a movable layer above the page. A dialog can show a message, collect form input, confirm an action, or display data loaded from the server.

A dialog is not automatically modal. Set modal: true when interaction with the rest of the page must be blocked until the dialog is closed.

Dialog vs Modal Dialog Top ↑

A normal dialog floats above the page while the rest of the interface can remain available. A modal dialog adds an overlay and prevents interaction with the page behind it until the dialog is closed.

$( "#my_dialog" ).dialog({
    modal: true
});

Position a Dialog Top ↑

The Dialog widget uses the jQuery UI Position utility. You can align the dialog to the window or another element and add offsets.

Tutorial: Positioning a Dialog Box →

Display a Dialog on Page Load Top ↑

The simplest pattern initializes the dialog with autoOpen: true, which is the default.

<div id="my_dialog" title="plus2net dialog">
    <p>plus2net.com jQuery section.</p>
</div>

$( function () {
    $( "#my_dialog" ).dialog();
});

Demo: show a Dialog on page load →

Open a Dialog after a Time Delay Top ↑

Use setTimeout() when the dialog should appear after a delay. This preserves the original four-second example.

$( function () {
    $( "#my_dialog" ).dialog({
        autoOpen: false
    });

    setTimeout( function () {
        $( "#my_dialog" ).dialog( "open" );
    }, 4000 );
});

Demo: show a Dialog after a delay →

Open a Dialog on Button Click Top ↑

$( function () {
    $( "#my_dialog" ).dialog({
        autoOpen: false
    });

    $( "#b1" ).on( "click", function () {
        $( "#my_dialog" ).dialog( "open" );
    });
});

Demo: open a Dialog from a button →

Confirmation Dialog Top ↑

A confirmation flow normally gives the user explicit action buttons such as Yes/No or Confirm/Cancel.

Tutorial: Confirmation Box →

Add Dialog Buttons Top ↑

Use the buttons option for Close, Submit or other actions.

$( "#my_dialog" ).dialog({
    buttons: {
        Close: function () {
            $( this ).dialog( "close" );
        }
    }
});

Demo: add a Close button →

Collect Input and Return It to the Main Page Top ↑

A dialog can contain ordinary form controls. Validate the values, then copy the result to the main page or submit it to a backend.

$( "#save-dialog" ).on( "click", function () {
    const name = $( "#name" ).val().trim();
    const email = $( "#email" ).val().trim();

    $( "#result" ).text(
        "Name: " + name + " | Email: " + email
    );

    $( "#my_dialog" ).dialog( "close" );
});

Demo: pass dialog form data to the main page →

Show and Hide Animation Effects Top ↑

The show and hide options can use jQuery UI effects.

$( "#my_dialog" ).dialog({
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "fade",
        duration: 300
    }
});

Demo: Dialog animation effects →

Pass Data from the Main Page to the Dialog Top ↑

$( "#open-dialog" ).on( "click", function () {
    const name = $( "#name" ).val().trim();

    $( "#dialog-message" ).text(
        "Welcome " + name
    );

    $( "#my_dialog" ).dialog( "open" );
});

Demo: pass main-page data into a Dialog →

Load Record Details by ID Top ↑

The original example sends a record ID to a PHP backend and displays the returned record in the dialog. Keep the ID separate from display text and validate it on the server.

$( "#load-record" ).on( "click", function () {
    const id = Number( $( "#record_id" ).val() );

    if ( !Number.isInteger( id ) || id < 1 ) {
        $( "#dialog-body" ).text( "Enter a valid record ID." );
        return;
    }

    $( "#dialog-body" ).load(
        "data.php",
        { id: id }
    );

    $( "#my_dialog" ).dialog( "open" );
});

Demo: show record details by entered ID →

Load Record Details from a Selected Button Top ↑

When several records have an Edit/View button, store the record ID in a data-* attribute. This is clearer than using attr() on a button's generic value attribute.

$( ".record-details" ).on( "click", function () {
    const id = Number( $( this ).data( "id" ) );

    $( "#dialog-body" ).load(
        "data.php",
        { id: id }
    );

    $( "#my_dialog" ).dialog( "open" );
});

Demo: show record details from a selected button →

Create a Signup Form in a Dialog Top ↑

The original demo inserts a student record from a dialog form. For current implementations, submit state-changing operations with POST, validate on the server, use prepared statements, and protect public forms against CSRF where appropriate.

Demo: collect and store signup data →

Edit an Existing Record Top ↑

The original edit example loads the selected student's current mark into the dialog, lets the user change it, then posts the new value to an update script. Keep the same flow, but validate the record ID and mark server-side and use a prepared UPDATE query.

$( ".edit-record" ).on( "click", function () {
    const id = Number( $( this ).data( "id" ) );

    $( "#dialog-body" ).load(
        "data1.php",
        { id: id },
        function () {
            $( "#my_dialog" ).dialog( "open" );
        }
    );
});

Demo: edit a record in a Dialog →

Download the Original Dialog Examples Top ↑

Download Dialog box demo scripts

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: