如何在jQuery UI对话框窗口中添加额外的对话框小部件关闭按钮

Question

the standard code to close the window with the X on the top right is this:

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button>

I need to add a "Close" button at the bottom of the modal popup window.

thanks

Answer 1

Initialize the dialog with the buttons option specified:

$( ".selector" ).dialog({ buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] });

Or set the buttons after initialization:

$( ".selector" ).dialog( "option", "buttons", [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] );

Answer 2

If you can visit the jQuery UI Dialog page, which also has other customizations along with the default functionality.

We also can customize how the display should be. The Dialog in jQuery has .button property for which we can create our own customized buttons.

Here is the js for buttons

buttons: {
     submit: function(){
      //write your code for submission
     },
     close: function(){
         $(this).dialog('close');
     }

This has to be embedded in the dialog method of jQuery.

Here is the fiddle that should answer your question

FIDDLE

Hope it helps.