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 thi

Answer 1

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>

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

Answer 3

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.

Answer 4

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.

Answer 5

a solution can be having the close inside your modal

take a look at this simple example

Answer 6

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

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