How to remove close button on the jQuery UI dialog

Question

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

User · Answer

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

User · Answer

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

User · Answer

Robert MacLean s answer did not work for me   This however does work for me       div   dialog      open  function         ui-dialog-titlebar-close   hide

User · Answer

div2   dialog      closeOnEscape  false     open  function event  ui        div2   parent   find  a ui-dialog-titlebar-close   hide

User · Answer

For the deactivating the class  the short code       ui-dialog-titlebar-close   hide      may be used

User · Answer

The best way to hide the button is to filter it with it s data-icon attribute       dialog-id  data-icon  delete     hide

User · Answer

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

User · Answer

I catch the close event of the dialog box  This code then removes the  lt div gt    dhx combo list    open  function event  ui         hide close button      this  parent   children   children   ui-dialog-titlebar-close   click function            dhx combo list   remove

User · Answer

ui-button-icon-only   hide

User · Answer

You can also remove your header line    lt div data-role  header  gt     lt  div gt   which removes the close button

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I think this is better   open  function event  ui        this  closest   ui-dialog   find   ui-dialog-titlebar-close   hide

User · Answer

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

User · Answer

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    lt div class  ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable  gt       lt  --  --- this is the dialog widget -- gt       lt div class  ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix  gt           lt span class  ui-dialog-title  id  ui-dialog-title-dialog  gt Dialog title lt  span gt           lt a class  ui-dialog-titlebar-close ui-corner-all  href     gt  lt span class  ui-icon ui-icon-closethick  gt close lt  span gt  lt  a gt       lt  div gt       lt div id  div2  style  height  200px  min-height  200px  width  auto   class  ui-dialog-content ui-widget-content  gt           lt  --  --- this is the element upon which  dialog   was called -- gt       lt  div gt   lt  div gt    Demos here

User · Answer

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

User · Answer

document querySelector   ui-dialog-titlebar-close   style display    none

User · Answer

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

User · Answer

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  quot close quot                    No  gracias   function no       this  data DATA RETORNO  false     this  dialog  quot close quot                           I use following script call to show it  ConfirmarSiNo  Titulo                    Desea actualizar                  idModalPadre                 eligioSi    gt                                if  eligioSi                                    this  tarifa val tarifa tarifa                                   this   ActualizarTarifa tarifa                                                              whithin Html body I have the following div that contains the dialog   lt div class  quot modal quot  id  quot confirmar-si-no quot  title  quot  quot  aria-labelledby  quot confirmacion-label quot  gt      mensaje  lt  div gt   final result is   function  ConfirmarSiNo  is based on  Whome  answer on post How to implement    confirmation    dialog in Jquery UI dialog

[jquery] How to remove close button on the jQuery UI dialog?

Examples related to jquery

Examples related to html

Examples related to css

Examples related to jquery-ui

Examples related to jquery-ui-dialog