jquery UI dialog how to initialize without a title bar

Question

Is it possible to open a jQuery UI Dialog without a title bar

User · Answer

Actually there s yet another way to do it  using the dialog widget directly   You can get the Dialog Widget thus       example   dialog dialogOpts    dlgWidget       example   dialog  widget      and then do   dlgWidget find   ui-dialog-titlebar   hide      to hide the titlebar within that dialog only  and in a single line of code  I like chaining        example   dialog  widget   find   ui-dialog-titlebar   hide      No need to add an extra class to the dialog this way  just go at it directly  Workss fine for me

User · Answer

I use this in my projects      myDialog   dialog dialogOpts      remove the title bar     myDialog   siblings  div ui-dialog-titlebar   remove       one liner     myDialog   dialog dialogOpts  siblings   ui-dialog-titlebar   remove

User · Answer

This worked for me  open  function event  ui                   quot  ui-dialog-titlebar quot     this  parent                   hide     Full  speedbump dialog     dialogClass   speedbump-container     autoOpen  false    closeOnEscape  false    modal  true    resizable  false    draggable  false    create  function                     speedbump          closest   ui-dialog            attr  id    speedbump-container           open  function event  ui           quot  ui-dialog-titlebar quot     this  parent           hide

User · Answer

I think that the best solution is to use the option dialogClass   An extract from jquery UI docs   during init         selector   dialog   dialogClass   noTitleStuff       or if you want after init            selector   dialog  option    dialogClass    noTitleStuff      So i created some dialog with option dialogClass  noTitleStuff  and the css like that    noTitleStuff  ui-dialog-titlebar  display none    too simple    but i took 1 day to think why my previous id- class drilling method was not working  In fact when you call  dialog   method the div you transform become a child of another div  the real dialog div  and possibly a  brother  of the titlebar div  so it s very difficult to try finding the latter starting from former

User · Answer

Try using      mydialog   closest   ui-dialog-titlebar   hide      This will hide all dialogs titles      ui-dialog-titlebar   hide

User · Answer

I like overriding jQuery widgets     function             widget  sauti dialog     ui dialog            options                headerVisible  false                     create  function                     ready to generate button             this  super   create       for 18 would be   Widget prototype  create call this                  decide if header is visible             if this options headerVisible    false                  this uiDialogTitlebar hide                        setOption  function  key  value                this  super key  value      for 1 8 would be   Widget prototype  setOption apply  this  arguments                if  key      headerVisible                     if  key    false                      this uiDialogTitlebar hide                    else                     this uiDialogTitlebar show                    return                                     jQuery     So you can now setup if you want to show title bar or not         mydialog   dialog         headerVisible  false    or true

User · Answer

I find it more efficient  and more readable  to use the open event  and hide the title bar from there  I don t like using page-global class name searches   open  function       this  closest   ui-dialog   find   ui-dialog-titlebar first   hide        Simple

User · Answer

For me  I still wanted to use the re-sizable corners  just didn t want so see the diagonal lines  I used      ui-resizable-handle   css  opacity   0      Just realized I was commenting on the wrong question  Living up to my namesake

User · Answer

I figured out a fix for dynamically removing the title bar       example   dialog dialogOpts      remove the title bar     ui-dialog-titlebar   hide      This will remove all elements with the class  ui-dialog-titlebar  after the dialog box is rendered

User · Answer

I believe you can hide it with CSS     ui-dialog-titlebar       display  none      Alternatively  you can apply this to specific dialogs with the dialogClass option        createUserDialog    dialog       dialogClass   no-titlebar         no-titlebar  ui-dialog-titlebar       display  none      Check out  Theming  the Dialog  The above suggestion makes use of the dialogClass option  which appears to be on it s way out in favor of a new method

User · Answer

This is How it can be done   Go  to themes folder--   base--   open  jquery ui dialog css     Find     Followings   if you don t want to display titleBar then simply set display none as i did in the following       ui dialog ui-dialog  ui-dialog-titlebar        padding   4em 1em      position  relative          display none      Samilarly for title as well    ui-dialog  ui-dialog-title       float  left      margin   1em 0      white-space  nowrap      width  90       overflow  hidden      text-overflow  ellipsis      display none       Now comes close button you can also set it none or you can set its   ui-dialog  ui-dialog-titlebar-close       position  absolute      right   3em      top  50       width  21px      margin  -10px 0 0 0      padding  1px      height  20px      display none       I did lots of search but nothing then i got this idea in my mind  However this will effect entire application to don t have close button title bar for dialog but you can overcome this as well by using jquery and adding and setting  css via jquery  here is syntax for this       specificclass   css  display normal

User · Answer

This worked for me       dialog   dialog       create  function  event  ui                ui-widget-header   hide

User · Answer

You can use jquery to hide titlebar after using dialogClass when initializing the dialog   during init        selector   dialog       dialogClass   yourclassname           yourclassname div ui-dialog-titlebar   hide      By using this method  you don t need to change your css file  and this is dynamic too

User · Answer

The one thing I discovered when hiding the Dialog titlebar is that  even if display is none  screen readers still pick it up and will read it  If you already added your own title bar  it will read both  causing confusion    What I did was removed it from the DOM using   selector  remove    Now screen readers  and every one else  will not see it because it no longer exists

User · Answer

This worked for me to hide the dialog box title bar        ui-dialog-titlebar    css  display    none

User · Answer

go to your jquery-ui js  in my case jquery-ui-1 10 3 custom js  and search for this  createTitlebar    and comment it   now anyone of yours dialog will appear with headers  If you want to customize the header just go to  createTitlebar    and edit the code inside   by

User · Answer

If you have multiple dialog  you can use this       the dialog   dialog           open  function event  ui                   hide titlebar                this  parent   children   ui-dialog-titlebar   hide

User · Answer

This next form fixed me the problem    x000D   x000D      btnShow   click function     x000D        basicModal   dialog   x000D      modal  true  x000D      height  300  x000D      width  400  x000D      create  function     x000D            ui-dialog   find   ui-dialog-titlebar   css   x000D           background-image    none   x000D           background-color    white   x000D           border    none  x000D            x000D        x000D        x000D      x000D   basicModal   x000D    display  none  x000D    x000D   lt script src  http   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   ajax googleapis com ajax libs jqueryui 1 10 3 jquery-ui min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  http   ajax googleapis com ajax libs jqueryui 1 10 3 themes smoothness jquery-ui css    gt  x000D   lt div id  basicModal  gt  x000D    Here your HTML content x000D   lt  div gt  x000D   lt button id  btnShow  gt Show me  lt  button gt  x000D   x000D   x000D

User · Answer

Try this      ui-dialog-title-divid   parent   hide      replace divid by corresponding id

User · Answer

This is the easiest way to do it and it will only remove the titlebar in that one specific dialog       dialog selector   find   ui-dialog-titlebar   hide

User · Answer

I think the cleanest way of doing it would be to create a new myDialog widget  consisting of the dialog widget minus the title bar code  Excising the title bar code looks straightforward    https   github com jquery jquery-ui blob master ui jquery ui dialog js

User · Answer

You could remove the bar with the close icon with the techinques described above and then add a close icon yourself    CSS    CloseButton   background  url     icons close-button png       width 15px  height 15px  border  0px solid white  top 0  right 0  position absolute  cursor  pointer  z-index 999      HTML   var closeDiv   document createElement  div    closeDiv className    CloseButton       append this div to the div holding your content  JS       closeDiv  click function                  yourDialogContent   dialog  close

User · Answer

Have you tried solution from jQuery UI docs  https   api jqueryui com dialog  method-open  As it say you can do like this     In CSS    no-titlebar  ui-dialog-titlebar     display  none      In JS        dialog    dialog     dialogClass   no-titlebar

[jquery] jquery UI dialog: how to initialize without a title bar?

Examples related to jquery

Examples related to jquery-ui