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

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

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

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.

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.

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.

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):

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

This causes the issue:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Here is great answer https://stackoverflow.com/a/31045175/3778527 I'm tested with:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

a solution can be having the close inside your modal

take a look at this simple example

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.

I had this problem and was able to resolve it with the declaration below.

$.fn.bootstrapBtn = $.fn.button.noConflict();

Just linking the CSS worked for me. It may have been missing from my project entirely:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

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('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
}, 
...

If English is bad forgive me, I am using Google Translate.

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:

    $('<div>dialog content</div>').dialog({
        title: 'Title',
        open: function(){
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
        }
    });

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('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
        },

and on close event you need to remove that

close: function () {
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.html('');}

Complete example

<div id="deleteDialog" title="Confirm Delete">
 Can you confirm you want to delete this event?
</div> 

$("#deleteDialog").dialog({
                width: 400, height: 200,
                modal: true,
                open: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
                },
                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");

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