Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to remove the close button on jQuery UI dialog box widget?

Tags:

What's the best way to remove the close button on the jQuery UI dialog box?

I do not wish people to be able to close the dialog box.

I'm covering it on the code angle by handling:

closeOnEscape: false, beforeclose: function (event, ui) { return false; } 

I'm trying not to need to write script to grap the class / id of the close button and then hide it manually. And I'd rather not change the CSS manually either, as the dialog box may have situations where it needs the close button.

I'd prefer to do it the dialog config somehow, but either I can't figure out how to do it or the dialog box doesn't allow for it at all.

Any suggestions on how to configure the dialog box?

like image 979
Alex KeySmith Avatar asked Aug 25 '10 14:08

Alex KeySmith


People also ask

How to remove the close button in jQuery dialog?

Now, using the jQuery dialog() method, create the jQuery UI dialog, and in the open event, the handler will write a function to remove the hide button. Select the close button using the class “ui-dialog-titlebar-close” and hide it using the hide() method.

How to remove close button from html?

HTML. Here, we will see how to remove the close button on the jQuery UI dialog using CSS. Approach: By setting the display property of the ui-dialog-titlebar-close class element to none.

How to remove close button from popup window in javascript?

Add the "HTML Snippet" widget to the page. $('button[class=close]'). hide();

How do I show or hide the button in jQuery modal popup?

When you create the dialog, you describe the buttons and the attributes of the buttons, so add an "id" attribute to the button: buttons: [ { text: "Save", id: "btnId", click: function() { ... } } ] You can then use the id as a jquery filter for the hide() and show() methods: $("#btnId").


1 Answers

I found this to be a good solution

$("#myDialogID").dialog({     closeOnEscape: false,     beforeClose: function (event, ui) { return false; },     dialogClass: "noclose" }); 

Not altering the existing styles, instead adding a new bit:

.noclose .ui-dialog-titlebar-close {     display:none; } 

Adding the class ended up being quite an elegant method, as i'm "classing" the dialog as one that cannot be closed.

like image 98
Alex KeySmith Avatar answered Oct 19 '22 17:10

Alex KeySmith