Change jQuery UI Dialog button as a simple link?

I have a custom button defined in the jquery ui dialog:

$("#myDlg").dialog({
        modal: true,
        buttons: {
            'My Custom Link': function () {
                alert('my custom message');
            },
            'Close': function () {
                $(this).dialog('close');
            }
        }
    });

I would like to show the "My custom link" button as an html link, not the default button style. How can i do this? thank.

+3
source share
1 answer

JQuery options do not support adding links by default. However, you can add whatever you want to the wrapper. See below

$(function() {
    $("#myDlg").dialog({
        modal: true,
        buttons: {
            'Close': function() {
                $(this).dialog('close');
            }
        }
    })
    .parent()
    .find('.ui-dialog-buttonset')
    .prepend('<a href="javascript:void(0);" id="myCustomLink">My Custom Link</a>');

    $('#myCustomLink').click(function () {
        alert('my custom message');
    });
});

Demo

+6
source

All Articles