jQuery UI Popup Dialog Simple Example

Its fairly easy to implement jQuery popup dialog. You just need to include jQuery UI JS and CSS in your project and need to call the method as follows:

.dialog() with additional options as you want.

$("#dialog-form").dialog({
    title: "Dialog Title",
    width: 500,
    height: 400,
    autoOpen: false,
    modal: true,
    buttons: {
        "Ok": function() {
            $('#buttonExecute').val("Show Dialog - Yes");
            $(this).dialog("close");
        },
        "Cancel": function() {
            $('#buttonExecute').val("Show Dialog - No");
            $(this).dialog("close");
        }
    },
    close: function( event, ui ) {
        console.log(event);
        console.log(ui);
    },
    open: function( event, ui ) {
        $('#buttonExecute').val("Show Dialog - Open");
    }
});

$('#buttonExecute').click(function() {
    $("#dialog-form").dialog("open");
});

Which will show dialog as below screenshot:

You can download full example from below link:

Click here to download.

jQuery UI Sortable and Draggable NOT working on iPad, iPhone or Android

jQuery UI sortable, draggable, re-sizable and all others working fine on browsers with no problems, however when I test it on hand held devices such as iPad, iPod, iPhone and Android it doesn't work. I cannot drag the boxes or sort the order at all.

Touch Punch will fix this issue, and most other jQuery UI on touch device problems. They described the process as hack, but it it is a lifesaver too.

Also you can download library from here.