Question

我想添加一个按钮（默认支持）和链接jQuery UI对话框。如何在jQuery UI对话框中添加链接？在我的情况下，我喜欢保存按钮和取消链接。提前谢谢。

Answer 1

你必须按照你想要的方式设置按钮的样式，但这会注入一个链接并绑定点击，甚至可以做你想要的。

$("#dialog").dialog({
    modal: true,
   open: function(event, ui){
            $('<a />', {
                'class': 'linkClass',
                text: 'Cancel',
                href: '#'
            })
            .appendTo($(".ui-dialog-buttonpane"))
            .click(function(){
                 $(event.target).dialog('close');
            });
    },
    buttons: {
        'Save': function() {
            //save code here.
        }
    }
});

Answer 2

我的方法是用一个链接包装按钮，以便利用jquery ui css而不必设置链接的样式。

要访问该按钮，您需要在初始选项中为其指定一个ID。

$('#your-selector').dialog({
                        resizable: false,
                        height: 260,
                        closeOnEscape: true,
                        width: 475,
                        modal: true,
                        .....
                        buttons: [
                            {
                                text: "Continue Shopping",
                                id: "continue-d-btn",
                                click: function () { $(this).dialog("close"); }
                            },
                            {
                                text: "Checkout",
                                id: "checkout-d-btn"  // assign an id ! important

                            }
                        ],
                        open: function (event, ui) {
                               // this is where we add an icon and a link
                               $('#checkout-d-btn')
                                .wrap('<a href="[YOUR_LINK]" ></a>');

                        }

                    });

Answer 3

你不能添加一个链接，不是没有真正破解标记，而是添加一个按钮作为一个链接工作？（只是一个按钮去了某处），像这样：

$("#dialog").dialog({
    modal: true,
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        GoPlaces: function() {
            window.location = 'http://www.stackoverflow.com';
        }
    }
});

You can try a demo here

Answer 4

$("#dialog-message").dialog({
    modal: true,
    autoOpen: false,
    width: 500,
    buttons: {
        'Save': function() {
            //stuff you want to do
        }
    }
});

然后只需在你的html中添加一个链接，让我们说id #awesomeLink

$("#awesomeLink").click(function() {
    $("#dialog-message").dialog('close');
});

Answer 5

您是否有理由将其作为链接而不是与链接执行相同操作的按钮？

您可以配置取消按钮，例如：

window.location.href="http://www.google.com"

Answer 6

我只是用我的代码完成了这项工作，它就像一个魅力，在chrome中。它使用本机对话框功能显示两个按钮。第一个指向文件，单击时，下载文件而不刷新页面。第二个按钮只是关闭jQuery对话框。

var src = https://domain.com/yourfilepath;

$("#dialog").dialog({
        buttons: [
            {
                text: "download",
                click: function () {

                    window.location.href=src;
                }
            },
            {
                text: "close",
                click: function () {

                    $(this).dialog("close");
                }
            }
        ]
    });

jQuery UI对话框链接而不是按钮

6 个答案: