jQueryUI modal dialog does not show close button x

Question

I m  using a jQuery modal dialog in my ASP  NET MVC 3 application  It works fine except for that there is no close button showing in the top right corner  How can I add this       dialog-modal   dialog               modal  true              autoOpen  false              buttons                    Ok  function                            this  dialog  close

User · Answer

I think the problem is that the browser could not load the jQueryUI image sprite that contains the X icon  Please use Fiddler  Firebug  or some other that can give you access to the HTTP requests the browser makes to the server and verify the image sprite is loaded successfully

User · Answer

Just check the close button image path in your jquery-ui css    ui-icon        width  16px       height  16px       background-image  url      img ui-icons 222222 256x240 png      iconsContent         ui-widget-content  ui-icon       background-image  url    img ui-icons 222222 256x240 png    iconsContent         ui-widget-header  ui-icon       background-image  url    img ui-icons 222222 256x240 png    iconsHeader         ui-state-default  ui-icon        background-image  url images ui-icons 888888 256x240 png    iconsDefault         ui-state-hover  ui-icon   ui-state-focus  ui-icon       background-image  url    img ui-icons 454545 256x240 png    iconsHover         ui-state-active  ui-icon       background-image  url    img ui-icons 454545 256x240 png    iconsActive          Correct the path of icons 222222 256x240 png and ui-icons 454545 256x240 png

User · Answer

While the op does not explicitly state they are using jquery ui and bootstrap together  an identical problem happens if you do  You can resolve the problem by loading bootstrap  js  before jquery ui  js   However  that will cause problems with button state colors    The final solution is to either use bootstrap or jquery ui  but not both   However  a workaround is           lt div gt dialog content lt  div gt    dialog           title   Title           open  function                var closeBtn       ui-dialog-titlebar-close                closeBtn append   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt  lt span class  ui-button-text  gt close lt  span gt

User · Answer

Another possibility is that you have the bootstrap library   Some version of bootstrap and jquery-ui have conflict with the  button   method  and if your bootstrap js is placed after jquery-ui js  the bootstrap  button   overrides your jquery button and the jquery-ui  X  image would then not show up   see here  https   github com twbs bootstrap issues 6094  This works  close box visible     lt script src    netdna bootstrapcdn com twitter-bootstrap 2 3 2 js bootstrap min js  gt  lt  script gt   lt script src    ajax googleapis com ajax libs jqueryui 1 10 3 jquery-ui min js  gt  lt  script gt    This causes the issue    lt script src    ajax googleapis com ajax libs jqueryui 1 10 3 jquery-ui min js  gt  lt  script gt   lt script src    netdna bootstrapcdn com twitter-bootstrap 2 3 2 js bootstrap min js  gt  lt  script gt

User · Answer

In the upper right corner of the dialog  mouse over where the button should be  and see rather or not you get some effect  the button hover    Try clicking it and seeing if it closes   If it does close  then you re just missing your image sprites that came with your package download

User · Answer

Just linking the CSS worked for me   It may have been missing from my project entirely    lt link rel  stylesheet  href    code jquery com ui 1 12 1 themes base jquery-ui css  gt

User · Answer

I had this problem and was able to resolve it with the declaration below      fn bootstrapBtn     fn button noConflict

User · Answer

Here is great answer https   stackoverflow com a 31045175 3778527 I m tested with    lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes blitzer jquery-ui css    gt   lt link rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css    gt   lt link rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css    gt   lt script type  text javascript  src    code jquery com jquery-1 11 0 min js  gt  lt  script gt   lt script type  text javascript  src    maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt   lt script type  text javascript  src    code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt

User · Answer

a solution can be having the close inside your modal  take a look at this simple example

User · Answer

Using the principle of the idea user2620505 got result with implementation of addClass       open  function            ui-dialog-titlebar-close   addClass  ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only            ui-dialog-titlebar-close   append   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt  lt span class  ui-button-text  gt close lt  span gt               If English is bad forgive me  I am using Google Translate

User · Answer

You need to add quotes around the  ok    That is the text of the button  As it is  the button s text is currently empty  and hence not displayed  because it is trying to resolve the value of that variable   Modal dialogs aren t meant to be closed in any fashion other than pressing the  ok  or  cancel  buttons   If you want the  x  in the right hand corner  set modal  false or just remove it altogether

User · Answer

Pure CSS Workaround   I was using both bootstrap and jQuery UI and changing the order of adding the scripts broke some other objects  I ended up using pure CSS workaround    ui-dialog-titlebar-close     background  url  http   code jquery com ui 1 10 3 themes smoothness images ui-icons 888888 256x240 png   repeat scroll -93px -128px rgba 0  0  0  0     border  medium none     ui-dialog-titlebar-close hover     background  url  http   code jquery com ui 1 10 3 themes smoothness images ui-icons 222222 256x240 png   repeat scroll -93px -128px rgba 0  0  0  0

User · Answer

I had a similar issue   I was using jquery and jquery-ui   When I upgraded my versions  the close dialog image no longer appeared   My problem was that when I unzipped the js package that I downloaded  the directories did not have the execute permission     So a quick  chmod  x dir-name  and also for the sub-folders  did the trick  Without the execute permission on linux  apache cannot get into the folder

User · Answer

I had the same issue just add this function to the open dialog options and it worked sharm  open  function                var closeBtn       ui-dialog-titlebar-close                closeBtn append   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt                  and on close event you need to remove that  close  function                  var closeBtn       ui-dialog-titlebar-close                closeBtn html         Complete example   lt div id  deleteDialog  title  Confirm Delete  gt   Can you confirm you want to delete this event   lt  div gt        deleteDialog   dialog                   width  400  height  200                  modal  true                  open  function                          var closeBtn       ui-dialog-titlebar-close                        closeBtn append   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt                                        close  function                          var closeBtn       ui-dialog-titlebar-close                        closeBtn html                                         buttons                         Confirm   function                              calendar fullCalendar  removeEvents   event  id                             this  dialog  close                                                Cancel   function                                this  dialog  close                                                                             dialog   dialog  open

User · Answer

I suppose there is some conflict with other JS library in your code  Try to force showing the close button       open function            ui-dialog-titlebar-close   show             This worked for me

[jquery] jQueryUI modal dialog does not show close button (x)

Examples related to jquery

Examples related to asp.net-mvc-3

Examples related to jquery-ui

Examples related to dialog