Menu
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?
979
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.
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.
Add the "HTML Snippet" widget to the page. $('button[class=close]'). hide();
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").
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.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With