0

I am working on asp.net mvc. I am trying to display a form in jquery dialog box, like

$("#dialog-editinvitem").dialog({
        autoOpen: false,
        width: 420,
        resizable: false,
        modal: true,
        buttons: {
            OK: function () {
               //...
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
        }
    });

it works fine. the buttons in the dialog-box are displayed at lower bottom of the dialog. but i need to display the buttons at the top left corner of the dialog box after the dialog title bar. I have tried with some jquery code to position the button panel like,

var btnset = $(this).parent().children('.ui-dialog-buttonpane').html();
            $(this).parent().children('.ui-dialog-buttonpane').remove();
            $("<div class='ui-dialog-buttonpane ui-widget-content ui-helper-clearfix'>" + btnset + "</div>").insertAfter($(this).parent().children('.ui-dialog-titlebar'));
            $('.ui-dialog-buttonset').css('float', 'left');
            $('.ui-dialog-buttonpane').css('border-width', '0px 0px 1px 0px');

the button panel successfully positioned at top left corner but it doesnot fire button click events. Please guide me.

4

2 回答 2

0

请尝试在打开对话框时添加按钮元素位置，就像下面的代码片段一样

$('#dialog-editinvitem').dialog({
  open: function (event, ui) {
    $(this).before($(this).parent().find('.ui-dialog-buttonpane'));
  },
  ...
于 2013-12-03T09:37:08.347 回答
0

您的代码存在问题，您正在删除 dom 元素及其相关事件。尝试克隆 dom 元素并做一些样式。稍后完成后，您将删除原始文件。将其更改为

$(this).parent().children('.ui-dialog-buttonpane').remove();

这个

var objbuttonPane = $(this).parent().children('.ui-dialog-buttonpane').clone(true);
//once you done with styling and positiong the button. you do  remove the original element  and append the cloned element

或者为什么你需要 Jquery 按钮？您可以将提交/链接放在您选择的任何地方并设置它们的样式。只是不要在 jquery 对话框中传递按钮对象。像这样的东西。

$("#dialog").dialog({
        autoOpen: true,
        width: 420,
        resizable: false,
        modal: true,       
        close: function () {
        }
    });

演示：Jsfiddle

于 2013-01-22T10:37:38.590 回答