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

score 196 · Answer 1 · edited Aug 23 '13 at 14:00

196

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>

edited Aug 23 '13 at 14:00

Jörn Zaefferer

5,665
3
30
34

answered Apr 01 '13 at 19:50

mekane84

2,120
2
12
5

28

This one pointed out the solution to me: Load first bootstrap and then jqueryUI. Cheers. – D.Rosado Jun 25 '13 at 11:19
5

Lovely - note that when including jQuery, Bootstrap **and** jQuery UI, you need to include them in that order (jQuery 1st, Bootstrap 2nd, UI 3rd) – scrowler Jan 28 '14 at 21:08
2

The answer can mess up some of bootstrap's functionality though - so if you're in a bind - try a little hack with css for the button class: .ui-dialog-titlebar-close:after { content: 'X'; font-weight:bold; } – Ross Jun 29 '14 at 20:49
This is one sort of answer that makes SO great - it might not be especially detailed or "expert", but you won't find it in a book. – TheRubberDuck Aug 04 '14 at 21:00
To add a little more detail to his excellent answer: first load the jquery library, next the bootstrap library and css, and then the jquery UI library and jquery UI css file. example: – BernieSF Sep 24 '14 at 15:32
13

You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine! – jsgoupil Nov 01 '14 at 23:55
`$.fn.button.noConflict()` should be the answer. – robbpriestley Aug 02 '17 at 23:36
@Ross can you explain which features of bootstrap are affected by this answer. – K. Shahzad Jan 27 '21 at 16:19

score 40 · Answer 2 · edited Jun 23 '15 at 14:40

40

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

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

edited Jun 23 '15 at 14:40

josliber

43,891
12
98
133

answered Jun 23 '15 at 14:36

Yure Kesley

501
4
3

2

This is the issue when using bootstrap and jqueryui together. Best solution. – compcentral Jul 31 '15 at 17:20
6

$(document).ready(function(){ $.fn.bootstrapBtn = $.fn.button.noConflict();} This resolved the conflict and resolved all other conflicts in the jQuery dialog as well. – santon Nov 08 '15 at 20:43
switching jquery ui and bootstrap creates other issue. it worked perfectly (Y) – MAK Sep 18 '16 at 20:51
Strangely, the `noConflict()` function seems self-consuming (I have `function (){return a.fn.button=d,this}`). That is, after calling, it's `undefined`. To code defensively, I put the `noConflict` call in the function opening a jQuery dialog, so I needed to check `if ($.fn.button.noConflict) {...` before executing `noConflict`. – ruffin Mar 21 '17 at 18:03
Do you know why I get the error "$.fn.button.noConflict is not a function" when I try your suggestion? Thanks. – Robert Smith Apr 06 '17 at 15:18

score 39 · Accepted Answer · answered Dec 30 '11 at 18:36

39

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.

answered Dec 30 '11 at 18:36

PriorityMark

3,247
16
22

6

Found this question and that was my issue, too. Also note that the native directory for this is `/css/images/` and not `/root/images/` like the rest of your images might be. – Millhorn Sep 20 '13 at 14:32
4

And how do I fix this? – b.g Jan 05 '17 at 10:40

Binod Kalathil · Answer 4 · 2016-02-05T07:33:28.890

27

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

edited Feb 05 '16 at 07:33

answered Apr 01 '14 at 08:06

Binod Kalathil

1,939
1
30
43

1

In my humble opinion, this is the cleanest and most elegant solution – Developer Nov 01 '17 at 02:36

score 12 · Answer 5 · answered Jul 25 '13 at 21:19

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

+1. The only thing is that, not only Bootstrap for some resaon removes those two `span` elements we're appending here, it also removes several classes from the close button as well. So I ended up with slightly modified version, that also **adds missing classes to the close button**: `var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only");` — informatik01, Aug 14 '14 at 11:49

score 6 · Answer 6 · answered May 07 '14 at 11:18

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.

score 5 · Answer 7 · edited Jun 13 '13 at 07:41

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

David Fawzy · Answer 8 · 2016-01-12T14:49:41.250

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

The issue when you using bootstrap with jquery-ui.css – David Fawzy Jan 12 '16 at 13:26 — David Fawzy, Jan 12 '16 at 13:26

score 4 · Answer 9 · answered Dec 30 '11 at 18:19

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.

score 3 · Answer 10 · answered Sep 08 '13 at 15:39

3

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.

answered Sep 08 '13 at 15:39

Adrian P.

5,060
2
46
47

Vaflan · Answer 11 · 2022-11-22T22:11:16.417

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>

The order in which files are added is important!

score 2 · Answer 12 · answered Aug 06 '17 at 15:45

2

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">

answered Aug 06 '17 at 15:45

fregas

3,192
3
25
41

score 0 · Answer 13 · answered Mar 01 '17 at 22:37

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.

score 0 · Answer 14 · answered May 19 '21 at 14:34

0

my solution was to put this

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

after all js and style sheet declarations

answered May 19 '21 at 14:34

Zviadi

81
1
5

Affable Geek · Answer 15 · 2011-12-30T17:03:47.617

0

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.

edited Dec 30 '11 at 17:03

answered Dec 30 '11 at 16:39

Affable Geek

465
1
9
19

That button display fine. In the jquery documentation if i just do $("#dialog").dialog(); with no options there should be a small x in the corner but in my case there is none. – Antarr Byrd Dec 30 '11 at 16:46
Wait - isn't the whole point of a modal button that you can't dismiss it without pressing the "OK" button? the 'modal: true' _should_ be removing that upper right hand corner X by definition. (Sorry, when I read your question, I was assuming the OK button wasn't showing...) – Affable Geek Dec 30 '11 at 17:02
Tried with modal:false still no luck – Antarr Byrd Dec 30 '11 at 17:16
JqueryUI does not remove the X on the top right corner when it is modal. Look at this example: http://jqueryui.com/demos/dialog/#modal – epignosisx Dec 30 '11 at 18:17

zero7 · Answer 16 · 2011-12-30T18:13:41.117

0

a solution can be having the close inside your modal

take a look at this simple example

edited Dec 30 '11 at 18:13

answered Dec 30 '11 at 17:59

zero7

1,298
8
14

jQueryUI modal dialog does not show close button (x)

16 Answers16

Linked