Best IT Recipes

Close button (x) not showing in jQueryUI modal dialog

I use the jQuery modal dialog in my ASP.NET MVC 3 application. It works fine except that there is not a single button in the upper right corner. How can I add this?

$("#dialog-modal").dialog({ modal: true, autoOpen: false, buttons: { Ok: function () { $(this).dialog("close"); } } });
+58
jquery jquery-ui asp.net-mvc-3 dialog
Dec 30 '11 at 16:36
source share
15 answers

In the upper right corner of the dialog box, hover over the button and see if it’s more likely or not, you will get some kind of effect (hover over the mouse). Try clicking it and see if it closes. If it closes, then you just lose the sprites with the images that come with downloading your package.

+35
Dec 30 '11 at 18:36
source share

Another possibility is that you have a bootstrap library. Some versions of bootstrap and jquery-ui conflict with the .button () method, and if your bootstrap.js is placed after jquery-ui.js, bootstrap.button () overrides your jquery button and the jquery-ui 'X' image will not be displayed.

see here: https://github.com/twbs/bootstrap/issues/6094

This works (visible flag):

 <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 a problem:

 <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>
+176
Apr 01 '13 at 19:50
source share

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

 $.fn.bootstrapBtn = $.fn.button.noConflict();
+36
Jun 23 '15 at 2:36
source share

Pure CSS Workaround:

I used both bootstrap and jQuery UI and changed the order of adding scripts, breaking some other objects. I ended up using a 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); }
+15
Apr 01 '14 at 8:06
source share

While op does not explicitly indicate that they use jquery ui and bootstrap together, a similar problem occurs if you do this. You can solve the problem by loading bootstrap (js) before jquery ui (js). However, this will cause problems with the colors of the buttons.

The ultimate solution is to either use bootstrap or jquery ui, but not both. However, a workaround:

  $('<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>'); } });
+12
Jul 25 '13 at 21:19
source share

Just check the image path of the close button in 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}*/; }

Fix the path of icons_222222_256x240.png and ui-icons_454545_256x240.png

+5
Jun 13 '13 at 7:23
source share

Using the principle of the idea, user 2620505 got the result with the 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 use Google Translate.

+5
May 7 '14 at 11:18
source share

I think the problem is that the browser was unable to load the jQueryUI help image containing the X icon. Please use Fiddler, Firebug or some others that can give you access to the HTTP requests that the browser makes on the server and verify that image sprite uploaded successfully.

+4
Dec 30 '11 at 18:19
source share

I had the same problem, 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 when closing the event you need to delete this

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

Full 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");
+4
Jan 12 '16 at 13:25
source share

I assume your code has a conflict with another JS library. Try showing the close button:

 ... open:function () { $(".ui-dialog-titlebar-close").show(); } ...

It worked for me.

+3
Sep 08 '13 at 15:39
source share

Here is a great answer to https://stackoverflow.com/a/412960/2321: I 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>
+2
Aug 31 '15 at 13:36
source share

Just CSS linking helped me. Perhaps it was completely absent from my project:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+1
Aug 6 '17 at 15:45
source share

You need to add quotes around "ok". This is the button text. Be that as it may, the button text is currently empty (and therefore not displayed) because it is trying to resolve the value of this variable.

Modal dialogs are not intended to be closed in any way, except by pressing the [ok] or [cancel] buttons. If you want [x] in the right corner, set modal: false or just delete it at all.

0
Dec 30 '11 at 16:39
source share

the solution may be inside your modal

take a look at this simple example

0
Dec 30 '11 at 17:59
source share

I had a similar problem. I used jquery and jquery-ui. When I updated my versions, the image of the closed dialog box no longer appeared. My problem was that when I unpacked the js package I downloaded, the directories did not have permission to execute.

So, quick hmm + x dir-name, and also for subfolders, did the trick. Without permission to run on linux, apache cannot get into the folder.

0
Mar 01 '17 at 22:37
source share


More articles:


All Articles