javascript - How to make jquery-ui-dialog not have a close button? - Stack Overflow

admin管理员组

文章数量:1335363

I didn't find this in the documentation.

Should I just make the close button display:none with css, or is there a clean way in the API to make a dialog without the X button (top-right)?

I didn't find this in the documentation.

Should I just make the close button display:none with css, or is there a clean way in the API to make a dialog without the X button (top-right)?

• javascript
• jquery
• jquery-ui
• jquery-ui-dialog

Share Improve this question Follow asked Feb 1, 2012 at 9:36 ripper234ripper234 230k280280 gold badges646646 silver badges914914 bronze badges 6

• I'm pretty sure this is not possible to toggle via parameters. It makes no sense to provide dialogs without closing buttong/possibility. This wouldn't be good for usability reasons. If you need this for design purposes it's okay to do this via CSS. – Smamatti Commented Feb 1, 2012 at 9:39
• @Smamatti - the dialog is part of a wizard, where there's one way to proceed - and simply closing the dialog is not an option at this point. – ripper234 Commented Feb 1, 2012 at 9:41
• This is a duplicate of stackoverflow./questions/9093486/… – Barry Chapman Commented Feb 1, 2012 at 9:41
• Duplicate of stackoverflow./questions/896777/… – Chris Commented Feb 1, 2012 at 9:46
• @BarryChapman - wtf? No it really isn't. – ripper234 Commented Feb 1, 2012 at 9:46

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

This may solve your Problem:

       $("#dialogId").dialog({
           closeOnEscape: false,
           open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }
       });

There is no option to disable the 'X' button. You would need to add css to display none/hide() the element with the class 'ui-icon-closethick' when it is loaded and opened.

For some reason .hide() did not work for me. This did:

$('#divMsg').dialog({ title: 'Please wait...',
                      modal: true,
                      closeOnEscape: false,
                      open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).css('display', 'none'); } }).text('Text To Display').css('background', 'white');

This code snippet also shows how to set the title and text of the dialog box -- I am using it as a modal notification window and closing it when my AJAX call pletes.

本文标签： javascriptHow to make jqueryuidialog not have a close buttonStack Overflow