{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Java Code<\/span> <\/div> <pre class=\"language-java code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-java code-embed-code\">$(&quot;#div2&quot;).dialog({<br\/>    closeOnEscape: false,<br\/>    open: function(event, ui) {<br\/>        $(&quot;.ui-dialog-titlebar-close&quot;, ui.dialog | ui).hide();<br\/>    }<br\/>});<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.ui-dialog-titlebar-close {<br\/>    visibility: hidden;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.no-close .ui-dialog-titlebar-close {display: none }<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;selector&quot; title=&quot;No close button&quot;&gt;<br\/>    Wikitechy says This is a test without a close button<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">jQuery Code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$( &quot;.selector&quot; ).dialog({ dialogClass: &#039;no-close&#039; });<\/code><\/pre> <\/div>\n<h3 id=\"solution-3\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 3:<\/label><\/span><\/h3>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">open: function(event, ui) { <br\/>    \/\/hide close button.<br\/>    $(this).parent().children().children(&#039;.ui-dialog-titlebar-close&#039;).hide();<br\/>},<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.ui-dialog-titlebar-close{<br\/>    display: none;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.no-close .ui-dialog-titlebar-close {<br\/>    display: none;<br\/>}<\/code><\/pre> <\/div>\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&#8217;s close button:<\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$( &quot;#dialog&quot; ).dialog({<br\/>    dialogClass: &quot;no-close&quot;,<br\/>    buttons: [{<br\/>        text: &quot;OK&quot;,<br\/>        click: function() {<br\/>            $( this ).dialog( &quot;close&quot; );        }<br\/>    }]<br\/>});<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$(&quot;#div&quot;).dialog({<br\/>   open: function() { $(&quot;.ui-dialog-titlebar-close&quot;).hide(); }<br\/>});<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$(function(){<br\/>  \/\/this is your dialog:<br\/>  $(&#039;#mydiv&#039;).dialog({<br\/>    \/\/ Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:<br\/>    dialogClass: &#039;my-extra-class&#039; <br\/>  })<br\/>  \/\/ Step 2. Hide the close &#039;X&#039; button on the dialog that you marked with your extra class<br\/>  $(&#039;.my-extra-class&#039;).find(&#039;.ui-dialog-titlebar-close&#039;).css(&#039;display&#039;,&#039;none&#039;);<br\/>  \/\/ Step 3. Enjoy your dialog without the &#039;X&#039; link<br\/>})<\/code><\/pre> <\/div>\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&#8217;s data-icon attribute:<\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$(&#039;#dialog-id [data-icon=&quot;delete&quot;]&#039;).hide();<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$(&quot;.ui-dialog-titlebar-close&quot;).hide();<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div data-role=&quot;header&quot;&gt;...&lt;\/div&gt;<\/code><\/pre> <\/div>\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 [ad type=&#8221;banner&#8221;] To hide the close button on all dialogs we can [&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}]}}