Reputation: 39290

How to remove close button on the jQuery UI dialog?

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

Upvotes: 811

Answers (25)

Timothy C. Quinn

Reputation: 4515

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.

Upvotes: 0

Chesare

Reputation: 383

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:

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

Upvotes: 0

Robert MacLean

Reputation: 39290

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;
}

Upvotes: 724

Chrisman

Reputation: 99

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; }

Upvotes: 0

ruwan

Reputation: 61

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();
  });
},

Upvotes: 6

Gordian Yuan

Reputation: 5070

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

Upvotes: 90

wordragon

Reputation: 1357

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();

Upvotes: 1

Arsman Ahmad

Reputation: 2221

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
    },
    ....
});

Upvotes: 3

bmode

Reputation: 770

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();

Upvotes: 1

bpjoshi

Reputation: 1141

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();

Upvotes: -1

Michael Zelensky

Reputation: 2132

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.

Upvotes: 9

Salman Arshad

Reputation: 272376

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

Upvotes: 36

Matthew Wastrodowski

Reputation: 41

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

Upvotes: 2

Cos

Reputation: 562

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

Upvotes: 5

David

Reputation: 42237

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

Upvotes: 373

Earl

Reputation: 1289

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();
},

Upvotes: 128

mhu

Reputation: 18061

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" );
        }
    }]
});

Upvotes: 54

Sonal S.

Reputation: 1442

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();

Upvotes: 6

mellow-yellow

Reputation: 1820

You can also remove your header line:

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

which removes the close button.

Upvotes: 3

FLY

Reputation: 2459

Robert MacLean's answer did not work for me.

This however does work for me:

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

Upvotes: 29

Caniko

Reputation: 872

For the deactivating the class, the short code:

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

may be used.

Upvotes: 6

Alok Vad

Reputation: 91

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

Upvotes: 9

marcosfromero

Reputation: 2853

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

Upvotes: 6

ibrahimab

Reputation: 151

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

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

Upvotes: 7

Miguel Galante

Reputation: 1699

I think this is better.

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

Upvotes: 42

How to remove close button on the jQuery UI dialog?

Answers (25)

Related Questions