添加按钮到jquery ui对话框

我无法在此jquery ui对话框中添加按钮。 如果可能的话请举个例子。 谢谢。

 $(document).ready(function () { //setup new person dialog $('#dialog2').dialog({ autoResize: true, show: "clip", hide: "clip", height: 'auto', width: '1000', autoOpen: false, modal: true, position: 'top', draggable: false, title: "انتخاب درخواست", open: function (type, data) { $(this).parent().appendTo("form"); } }); $('#viewfaktor').dialog({ autoResize: true, show: "clip", hide: "clip", height: 'auto', width: '1000', autoOpen: false, modal: true, position: 'top', draggable: true, title: "مشاهده صورت ریز", open: function (type, data) { $(this).parent().appendTo("form"); } }); $('#msgBox').dialog({ autoResize: true, show: "clip", hide: "clip", height: 'auto', width: 'auto', autoOpen: false, modal: true, position: 'center', draggable: false, open: function (type, data) { $(this).parent().appendTo("form"); } }); }); function showDialog(id) { $('#' + id).dialog("open"); } function closeDialog(id) { $('#' + id).dialog("destroy"); }  

Answer 1

 $('#msgBox').dialog({ autoResize: true, show: "clip", hide: "clip", height: 'auto', width: 'auto', autoOpen: false, modal: true, position: 'center', draggable: false, open: function (type, data) { $(this).parent().appendTo("form"); }, buttons: { "OK": function() { $(this).dialog("close"); } } }); 

Answer 2

有时您也希望在创建对话框后动态添加按钮。 在动态添加按钮到对话框的问题中查看我的答案

 var mydialog = ... result of jqueryui .dialog() var buttons = mydialog.dialog("option", "buttons"); // getter $.extend(buttons, { foo: function () { alert('foo'); } }); mydialog.dialog("option", "buttons", buttons); // setter 

Answer 3

如果要在已打开的对话框中添加按钮，可以执行以下操作：

 var buttonSet = $('#dialog').parent().find('.ui-dialog-buttonset'); var newButton = $('My New Button'); newButton.button().click(function () { alert('My new button clicked'); }); buttonSet.append(newButton); 

Answer 4

这是一个例子

将此添加到您的函数：

 buttons: { OK: function() { //submit $( this ).dialog( "close" ); }, Cancel: function() { //cancel $( this ).dialog( "close" ); } } 

所以你得到了

  $('#msgBox').dialog({ autoResize: true, show: "clip", hide: "clip", height: 'auto', width: 'auto', autoOpen: false, modal: true, position: 'center', draggable: false, buttons: { OK: function() { //ok $( this ).dialog( "close" ); }, Cancel: function() { //cancel $( this ).dialog( "close" ); } } open: function (type, data) { $(this).parent().appendTo("form"); } });