{"id":1761,"date":"2017-03-22T19:51:55","date_gmt":"2017-03-22T14:21:55","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1761"},"modified":"2018-11-01T11:38:57","modified_gmt":"2018-11-01T06:08:57","slug":"remove-close-button-jquery-ui-dialog","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/remove-close-button-jquery-ui-dialog\/","title":{"rendered":"How to remove close button on the jQuery UI dialog"},"content":{"rendered":"<h2 id=\"problem\"><span style=\"color: #ff0000;\"><label class=\"label label-Warning\">Problem :<\/label><\/span><\/h2>\n<p>How to remove the close button (the X in the top-right corner) on a dialog box created by <a href=\"https:\/\/www.wikitechy.com\/step-by-step-tutorials\/jquery\/jquery-get\" target=\"_blank\" rel=\"noopener\">jQuery<\/a> UI?<\/p>\n<h3 id=\"solution-1\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 1:<\/label><\/span><\/h3>\n<h4 id=\"check-out-the-code-note-the-third-line-overriding-the-open-function-which-find-the-button-and-hides-it\"><span style=\"color: #000000;\">Check out the code (note the third line overriding the open function which find the button and hides it):\u00a0<\/span><\/h4>\n[pastacode lang=\u201djava\u201d manual=\u201d%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\u201d message=\u201dJava Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h4 id=\"to-hide-the-close-button-on-all-dialogs-we-can-use-the-following-css-too\"><span style=\"color: #000000;\">To hide the close button on all dialogs we can use the following CSS too:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.ui-dialog-titlebar-close%20%7B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-2\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 2:<\/label><\/span><\/h3>\n<ul>\n<li>Other option just using <a href=\"https:\/\/www.wikitechy.com\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> that does not over ride every dialog on the page.<\/li>\n<\/ul>\n<h3 id=\"the-css\"><span style=\"color: #333300;\"><strong>The CSS<\/strong><\/span><\/h3>\n[pastacode lang=\u201dcss\u201d manual=\u201d.no-close%20.ui-dialog-titlebar-close%20%7Bdisplay%3A%20none%20%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"the-html\"><span style=\"color: #0000ff;\"><strong>The <a style=\"color: #0000ff;\" href=\"https:\/\/www.wikitechy.com\/step-by-step-html-tutorials\/basic-structure-of-html\" target=\"_blank\" rel=\"noopener\">HTML<\/a><\/strong><\/span><\/h3>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"the-javascript\"><span style=\"color: #3366ff;\">The <a style=\"color: #3366ff;\" href=\"https:\/\/www.wikitechy.com\/tutorials\/javascript\/generate-random-string-characters-in-javascript\" target=\"_blank\" rel=\"noopener\">Javascript<\/a><\/span><\/h3>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(%20%22.selector%22%20).dialog(%7B%20dialogClass%3A%20\u2019no-close\u2019%20%7D)%3B\u201d message=\u201djQuery Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-3\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 3:<\/label><\/span><\/h3>\n[pastacode lang=\u201dcss\u201d manual=\u201dopen%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(\u2018.ui-dialog-titlebar-close\u2019).hide()%3B%0A%7D%2C%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-4\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 4:<\/label><\/span><\/h3>\n<h4 id=\"we-can-simply-use-css-to-hide-the-close-button-instead-of-javascript\"><span style=\"color: #000000;\">We can simply use CSS to hide the close button instead of JavaScript:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.ui-dialog-titlebar-close%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"solution-5\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 5:<\/label><\/span><\/h3>\n<h4 id=\"create-a-style\"><span style=\"color: #993300;\">Create a style:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.no-close%20.ui-dialog-titlebar-close%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"then-we-can-simply-add-the-no-close-class-to-any-dialog-in-order-to-hide-its-close-button\"><span style=\"color: #000000;\">Then, we can simply add the no-close class to any dialog in order to hide it\u2019s close button:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-6\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 6:<\/label><\/span><\/h3>\n<h4 id=\"it-works\"><span style=\"color: #800080;\">It works :<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-7\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 7:<\/label><\/span><\/h3>\n<h4 id=\"try-this-to-remove-close-button-on-the-jquery-ui-dialog\"><span style=\"color: #000000;\">Try this to remove close button on the jQuery UI dialog:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%24(function()%7B%0A%20%20%2F%2Fthis%20is%20your%20dialog%3A%0A%20%20%24(\u2018%23mydiv\u2019).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\u2019my-extra-class\u2019%20%0A%20%20%7D)%0A%20%20%2F%2F%20Step%202.%20Hide%20the%20close%20\u2019X\u2019%20button%20on%20the%20dialog%20that%20you%20marked%20with%20your%20extra%20class%0A%20%20%24(\u2018.my-extra-class\u2019).find(\u2018.ui-dialog-titlebar-close\u2019).css(\u2018display\u2019%2C\u2019none\u2019)%3B%0A%20%20%2F%2F%20Step%203.%20Enjoy%20your%20dialog%20without%20the%20\u2019X\u2019%20link%0A%7D)%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-8\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 8:<\/label><\/span><\/h3>\n<h4 id=\"to-hide-the-button-is-to-filter-it-with-its-data-icon-attribute\"><span style=\"color: #000000;\">To hide the button is to filter it with it\u2019s data-icon attribute:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%24(\u2018%23dialog-id%20%5Bdata-icon%3D%22delete%22%5D\u2019).hide()%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-9\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 9:<\/label><\/span><\/h3>\n<h4 id=\"for-the-deactivating-the-class-the-short-code\"><span style=\"color: #000000;\">For the deactivating the class, the short code:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%24(%22.ui-dialog-titlebar-close%22).hide()%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"solution-10\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 10:<\/label><\/span><\/h3>\n<h4 id=\"we-can-also-remove-the-header-line\"><span style=\"color: #000000;\">We can also remove the header line:<\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20data-role%3D%22header%22%3E\u2026%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>which removes the close button.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem : How to remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI? SOLUTION 1: Check out the code (note the third line overriding the open function which find the button and hides it):\u00a0 [pastacode lang=\u201djava\u201d manual=\u201d%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\u201d message=\u201dJava Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] To hide the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,1208],"tags":[3767,3770,3773,3771,3779,3772,3766,3768,3778,3776,3775,3777,3781,3780,3782,3774,3769],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-css","category-jquery","tag-best-way-to-remove-the-close-button-on-jquery-ui-dialog-box-widget","tag-dialog-remove-x","tag-dialog-widget","tag-dialog-without-close-button","tag-how-to-disable-close-button-of-popup-window-in-javascript","tag-how-to-remove-close-button-from-dialog-using-jquery","tag-html-how-to-remove-close-button-on-the-jquery-ui-dialog","tag-jquery-disable-x-button-in-top-right-of-dialog","tag-jquery-dialog-change-close-button-text","tag-jquery-dialog-close-button-event","tag-jquery-dialog-close-button-not-showing","tag-jquery-dialog-remove-title-bar","tag-jquery-ui-dialog-close-button","tag-jquery-ui-dialog-close-text","tag-remove-close-button-from-bootstrap-modal","tag-remove-close-button-on-jqueryui-dialog","tag-ui-dialog-with-option-to-hide-close-button"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1761"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1761\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}