72

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");
                }
            }
        });
Improve this question
0

16 Answers 16

Reset to default
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>
Improve this answer
8
  • 28
    This one pointed out the solution to me: Load first bootstrap and then jqueryUI. Cheers.
    – D.Rosado
    Commented Jun 25, 2013 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
    Commented Jan 28, 2014 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
    Commented Jun 29, 2014 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
    Commented Aug 4, 2014 at 21:00
  • 13
    You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
    – jsgoupil
    Commented Nov 1, 2014 at 23:55
41

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

$.fn.bootstrapBtn = $.fn.button.noConflict();
Improve this answer
5
  • 2
    This is the issue when using bootstrap and jqueryui together. Best solution.
    – compcentral
    Commented Jul 31, 2015 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
    Commented Nov 8, 2015 at 20:43
  • switching jquery ui and bootstrap creates other issue. it worked perfectly (Y)
    – MAK
    Commented Sep 18, 2016 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
    Commented Mar 21, 2017 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
    Commented Apr 6, 2017 at 15:18
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.

Improve this answer
2
  • 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
    Commented Sep 20, 2013 at 14:32
  • 4
    And how do I fix this?
    – b.g
    Commented Jan 5, 2017 at 10:40
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);
}
Improve this answer
1
  • 1
    In my humble opinion, this is the cleanest and most elegant solution
    – Developer
    Commented Nov 1, 2017 at 2:36
12

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>');
        }
    });
Improve this answer
1
  • +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
    Commented Aug 14, 2014 at 11:49
6

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.

Improve this answer
0
5

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

Improve this answer
5

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");
Improve this answer
1
  • 1
    The issue when you using bootstrap with jquery-ui.css
    – David Fawzy
    Commented Jan 12, 2016 at 13:26
4

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.

Improve this answer
0
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.

Improve this answer
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">
Improve this answer
0
2

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!

Improve this answer
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.

Improve this answer
4
  • 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
    Commented Dec 30, 2011 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
    Commented Dec 30, 2011 at 17:02
  • Tried with modal:false still no luck
    – Antarr Byrd
    Commented Dec 30, 2011 at 17:16
  • JqueryUI does not remove the X on the top right corner when it is modal. Look at this example: jqueryui.com/demos/dialog/#modal
    – epignosisx
    Commented Dec 30, 2011 at 18:17
0

a solution can be having the close inside your modal

take a look at this simple example

Improve this answer
0

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.

Improve this answer
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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.