How to remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?
Check out the code (note the third line overriding the open function which find the button and hides it):
[pastacode lang=”java” manual=”%24(%22%23div2%22).dialog(%7B%0A%20%20%20%20closeOnEscape%3A%20false%2C%0A%20%20%20%20open%3A%20function(event%2C%20ui)%20%7B%0A%20%20%20%20%20%20%20%20%24(%22.ui-dialog-titlebar-close%22%2C%20ui.dialog%20%7C%20ui).hide()%3B%0A%20%20%20%20%7D%0A%7D)%3B%0A%0A%0A%0A” message=”Java Code” highlight=”” provider=”manual”/] [ad type=”banner”]To hide the close button on all dialogs we can use the following CSS too:
[pastacode lang=”css” manual=”.ui-dialog-titlebar-close%20%7B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]- Other option just using CSS that does not over ride every dialog on the page.
The CSS
[pastacode lang=”css” manual=”.no-close%20.ui-dialog-titlebar-close%20%7Bdisplay%3A%20none%20%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]The HTML
[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22selector%22%20title%3D%22No%20close%20button%22%3E%0A%20%20%20%20Wikitechy%20says%20This%20is%20a%20test%20without%20a%20close%20button%0A%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/] [ad type=”banner”]The Javascript
[pastacode lang=”javascript” manual=”%24(%20%22.selector%22%20).dialog(%7B%20dialogClass%3A%20’no-close’%20%7D)%3B” message=”jQuery Code” highlight=”” provider=”manual”/][pastacode lang=”css” manual=”open%3A%20function(event%2C%20ui)%20%7B%20%0A%20%20%20%20%2F%2Fhide%20close%20button.%0A%20%20%20%20%24(this).parent().children().children(‘.ui-dialog-titlebar-close’).hide()%3B%0A%7D%2C%0A” message=”Css Code” highlight=”” provider=”manual”/]
We can simply use CSS to hide the close button instead of JavaScript:
[pastacode lang=”css” manual=”.ui-dialog-titlebar-close%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]Create a style:
[pastacode lang=”css” manual=”.no-close%20.ui-dialog-titlebar-close%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]Then, we can simply add the no-close class to any dialog in order to hide it’s close button:
[pastacode lang=”css” manual=”%24(%20%22%23dialog%22%20).dialog(%7B%0A%20%20%20%20dialogClass%3A%20%22no-close%22%2C%0A%20%20%20%20buttons%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20text%3A%20%22OK%22%2C%0A%20%20%20%20%20%20%20%20click%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%20this%20).dialog(%20%22close%22%20)%3B%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%5D%0A%7D)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]It works :
[pastacode lang=”css” manual=”%24(%22%23div%22).dialog(%7B%0A%20%20%20open%3A%20function()%20%7B%20%24(%22.ui-dialog-titlebar-close%22).hide()%3B%20%7D%0A%7D)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]Try this to remove close button on the jQuery UI dialog:
[pastacode lang=”css” manual=”%24(function()%7B%0A%20%20%2F%2Fthis%20is%20your%20dialog%3A%0A%20%20%24(‘%23mydiv’).dialog(%7B%0A%20%20%20%20%2F%2F%20Step%201.%20Add%20an%20extra%20class%20to%20our%20dialog%20to%20address%20the%20dialog%20directly.%20Make%20sure%20that%20this%20class%20is%20not%20used%20anywhere%20else%3A%0A%20%20%20%20dialogClass%3A%20’my-extra-class’%20%0A%20%20%7D)%0A%20%20%2F%2F%20Step%202.%20Hide%20the%20close%20’X’%20button%20on%20the%20dialog%20that%20you%20marked%20with%20your%20extra%20class%0A%20%20%24(‘.my-extra-class’).find(‘.ui-dialog-titlebar-close’).css(‘display’%2C’none’)%3B%0A%20%20%2F%2F%20Step%203.%20Enjoy%20your%20dialog%20without%20the%20’X’%20link%0A%7D)%0A” message=”Css Code” highlight=”” provider=”manual”/]To hide the button is to filter it with it’s data-icon attribute:
[pastacode lang=”css” manual=”%24(‘%23dialog-id%20%5Bdata-icon%3D%22delete%22%5D’).hide()%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]For the deactivating the class, the short code:
[pastacode lang=”css” manual=”%24(%22.ui-dialog-titlebar-close%22).hide()%3B%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]We can also remove the header line:
[pastacode lang=”markup” manual=”%3Cdiv%20data-role%3D%22header%22%3E…%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]which removes the close button.
Nice one