How to remove close button on the jQuery UI dialog?

JqueryHtmlCssJquery UiJquery Ui-Dialog

Jquery Problem Overview

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

Jquery Solutions

Solution 1 - Jquery

I have found this worked in the end (note the third line overriding the open function which find the button and hides it):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

To hide the close button on all dialogs you can use the following CSS too:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Solution 2 - Jquery

Here is another option just using CSS that does not over ride every dialog on the page.

The CSS

.no-close .ui-dialog-titlebar-close {display: none }

The HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

The Javascript.

$( ".selector" ).dialog({ dialogClass: 'no-close' });

Working Example

Solution 3 - Jquery

the "best" answer will not be good for multiple dialogs. here is a better solution.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},

Solution 4 - Jquery

You can use CSS to hide the close button instead of JavaScript:

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

If you don't want to affect all the modals, you could use a rule like

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

And apply .hide-close-btn to the top node of the dialog

Solution 5 - Jquery

As shown on the official page and suggested by David:

Create a style:

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

Then, you can simply add the no-close class to any dialog in order to hide it's close button:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

Solution 6 - Jquery

I think this is better.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

Solution 7 - Jquery

Once you have called .dialog() on an element, you can locate the close button (and other dialog markup) at any convenient time without using event handlers:

$("#div2").dialog({                    // call .dialog method to create the dialog markup
    autoOpen: false
});
$("#div2").dialog("widget")            // get the dialog widget element
    .find(".ui-dialog-titlebar-close") // find the close button for this dialog
    .hide();                           // hide it

Alternate method:

Inside dialog event handlers, this refers to the element being "dialogged" and $(this).parent() refers to the dialog markup container, so:

$("#div3").dialog({
    open: function() {                         // open event handler
        $(this)                                // the element being dialogged
            .parent()                          // get the dialog widget element
            .find(".ui-dialog-titlebar-close") // find the close button for this dialog
            .hide();                           // hide it
    }
});

FYI, dialog markup looks like this:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

Demos here

Solution 8 - Jquery

Robert MacLean's answer did not work for me.

This however does work for me:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

Solution 9 - Jquery

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

Solution 10 - Jquery

None of the above works. The solution that really works is:

$(function(){
  //this is your dialog:
  $('#mydiv').dialog({
    // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
    dialogClass: 'my-extra-class' 
  })
  // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
  $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
  // Step 3. Enjoy your dialog without the 'X' link
})

Please check if it works for you.

Solution 11 - Jquery

The best way to hide the button is to filter it with it's data-icon attribute:

$('#dialog-id [data-icon="delete"]').hide();

Solution 12 - Jquery

I catch the close event of the dialog box. This code then removes the <div> (#dhx_combo_list):

open: function(event, ui) { 
  //hide close button.
  $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){
    $("#dhx_combo_list").remove();
  });
},

Solution 13 - Jquery

http://jsfiddle.net/marcosfromero/aWyNn/

$('#yourdiv').                 // Get your box ...
  dialog().                    // ... and turn it into dialog (autoOpen: false also works)
  prev('.ui-dialog-titlebar'). // Get title bar,...
  find('a').                   // ... then get the X close button ...
  hide();                      // ... and hide it

Solution 14 - Jquery

For the deactivating the class, the short code:

$(".ui-dialog-titlebar-close").hide();

may be used.

Solution 15 - Jquery

The close button added by the Dialog widget has the class 'ui-dialog-titlebar-close', so after your initial call to .dialog(), you can use a statement like this to remove the close button again: It works..

$( 'a.ui-dialog-titlebar-close' ).remove();

Solution 16 - Jquery

$(".ui-button-icon-only").hide();

Solution 17 - Jquery

You can also remove your header line:

<div data-role="header">...</div>

which removes the close button.

Solution 18 - Jquery

Easy way to achieve: (Do this in your Javascript)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

Solution 19 - Jquery

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

Solution 20 - Jquery

Since I found I was doing this in several places in my app, I wrapped it in a plugin:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

Usage Example:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

Solution 21 - Jquery

I am a fan of one-liners (where they work!). Here is what works for me:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

Solution 22 - Jquery

How about using this pure CSS line? I find this the cleanest solution for a dialog with given Id:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

Solution 23 - Jquery

This is for jQuery UI 1.12. I added the following configuration setting for 'classes' option

        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },

the whole dialog initialization looks like this:

ConfirmarSiNo(titulo, texto, idPadre, fnCerrar) {
    const DATA_RETORNO = 'retval';
    $('confirmar-si-no').dialog({
        title: titulo,
        modal: true,
        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },
        appendTo: `#${idPadre}`,
        open: function fnOpen() { $(this).text(texto); },
        close: function fnClose() {
            let eligioSi = $(this).data(DATA_RETORNO) == true;
            setTimeout(function () { fnCerrar(eligioSi); }, 30);
        },
        buttons: {
            'Si, por favor': function si() { $(this).data(DATA_RETORNO, true); $(this).dialog("close"); },
            'No, gracias': function no() { $(this).data(DATA_RETORNO, false); $(this).dialog("close"); }
        }
    });
}

I use following script call to show it:

ConfirmarSiNo('Titulo',
              '¿Desea actualizar?',
              idModalPadre,
              (eligioSi) => {
                            if (eligioSi) {
                                this.$tarifa.val(tarifa.tarifa);
                                this.__ActualizarTarifa(tarifa);
                            }
                        });

whithin Html body I have the following div that contains the dialog:

<div class="modal" id="confirmar-si-no" title="" aria-labelledby="confirmacion-label">
    mensaje
</div>

final result is:

enter image description here

function 'ConfirmarSiNo' is based on 'Whome' answer on post How to implement “confirmation” dialog in Jquery UI dialog?

Solution 24 - Jquery

For those who are using DialogExtend jQuery Extension, you can use the closable option to manage this feature as well as many other tweaks that this decent extension provides.

Note, if you are already using DialogExtend, any of the aforementioned Dialog CSS hacks will get clobbered by DialogExtend when initialized.

Solution 25 - Jquery

You can remove the close button with the code below. There are other options as well which you might fight useful.

$('#dialog-modal').dialog({
	//To hide the Close 'X' button
    "closeX": false,
	//To disable closing the pop up on escape
	"closeOnEscape": false,
    //To allow background scrolling
	"allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();
Categories
Recommended Jquery Solutions
Recommended Html Solutions
Recommended Css Solutions
Recommended Jquery Ui Solutions
Recommended Jquery Ui-Dialog Solutions

Previous Solution:

What is the difference between docker-compose ports vs expose

DockerDocker Compose

Next Solution:

Git pull a certain branch from GitHub

GitMergeBranchGithubPull

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRobert MacLeanView Question on Stackoverflow
Solution 1 - JqueryRobert MacLeanView Answer on Stackoverflow
Solution 2 - JqueryDavidView Answer on Stackoverflow
Solution 3 - JqueryEarlView Answer on Stackoverflow
Solution 4 - JqueryGordian YuanView Answer on Stackoverflow
Solution 5 - JquerymhuView Answer on Stackoverflow
Solution 6 - JqueryMiguel GalanteView Answer on Stackoverflow
Solution 7 - JquerySalman AView Answer on Stackoverflow
Solution 8 - JqueryFLYView Answer on Stackoverflow
Solution 9 - JqueryAlok VadView Answer on Stackoverflow
Solution 10 - JqueryMichael ZelenskyView Answer on Stackoverflow
Solution 11 - JqueryibrahimabView Answer on Stackoverflow
Solution 12 - JqueryruwanView Answer on Stackoverflow
Solution 13 - JquerymarcosfromeroView Answer on Stackoverflow
Solution 14 - JqueryCanikoView Answer on Stackoverflow
Solution 15 - JquerySonal S.View Answer on Stackoverflow
Solution 16 - JqueryCosView Answer on Stackoverflow
Solution 17 - Jquerymellow-yellowView Answer on Stackoverflow
Solution 18 - JqueryArsman AhmadView Answer on Stackoverflow
Solution 19 - JqueryMatthew WastrodowskiView Answer on Stackoverflow
Solution 20 - JquerybmodeView Answer on Stackoverflow
Solution 21 - JquerywordragonView Answer on Stackoverflow
Solution 22 - JqueryChrismanView Answer on Stackoverflow
Solution 23 - JqueryChesareView Answer on Stackoverflow
Solution 24 - JqueryTimothy C. QuinnView Answer on Stackoverflow
Solution 25 - JquerybpjoshiView Answer on Stackoverflow