jQueryUI模态对话框不显示关闭按钮（x）

我在ASP .NET MVC 3应用程序中使用jQuery模态对话框。除右上角没有显示关闭按钮外，它工作正常。如何添加呢？

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });

在对话框的右上角，将鼠标悬停在按钮应位于的位置，并大致了解您是否有所效果（按钮悬停）。尝试单击它，看看它是否关闭。如果确实关闭，则说明您只是缺少软件包下载随附的图像精灵。

另一种可能性是您拥有引导程序库。某些版本的bootstrap和jquery-ui与.button（）方法冲突，如果将bootstrap.js放在jquery-ui.js之后，则bootstrap .button（）会覆盖您的jquery按钮和jquery-ui'X图像将不会显示。

看到这里：https : //github.com/twbs/bootstrap/issues/6094

这有效（关闭框可见）：

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

这会导致问题：

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

我遇到了这个问题，并可以通过下面的声明解决。

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

纯CSS解决方法：

我同时使用了引导程序和jQuery UI，更改添加脚本的顺序破坏了其他一些对象。我最终使用了纯CSS解决方法：

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

尽管op并未明确声明它们正在一起使用jQuery ui和bootstrap，但是如果您这样做，则会发生相同的问题。您可以通过在jquery ui（js）之前加载引导程序（js）来解决此问题。但是，这将导致按钮状态颜色出现问题。

最终的解决方案是使用bootstrap或jquery ui，但不能同时使用两者。但是，一种解决方法是：

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

只需检查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}*/; 
}

更正的路径icons_222222_256x240.png和ui-icons_454545_256x240.png

使用想法原理user2620505通过实现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>');
}, 
...

如果英语不好，请使用Google翻译。

我认为问题在于浏览器无法加载包含X图标的jQueryUI图像精灵。请使用Fiddler，Firebug或其他一些可以使您访问浏览器向服务器发出的HTTP请求并验证是否已成功加载图片精灵。

我有同样的问题，只是将此功能添加到打开的对话框选项中，并且它确实起作用

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

完整的例子

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

我想您的代码中与其他JS库存在一些冲突。尝试强制显示关闭按钮：

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

这对我有用。

这是一个很好的答案https://stackoverflow.com/a/31045175/3778527 我经过测试：

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

只是链接CSS对我有用。它可能在我的项目中完全丢失了：

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

您需要在“确定”周围添加引号。那就是按钮的文字。照原样，按钮的文本当前为空（因此不显示），因为它正尝试解析该变量的值。

除了按下[确定]或[取消]按钮外，模态对话框并不意味着以任何方式关闭。如果您想在右上角输入[x]，请设置modal：false或将其完全删除。

解决方案可以是模态内部的封闭

看看这个简单的例子

我有一个类似的问题。我正在使用jquery和jquery-ui。升级版本时，不再显示关闭对话框图像。我的问题是，当我解压缩下载的js软件包时，目录没有执行权限。

因此，快速的chmod + x目录名以及子文件夹都可以达到目的。没有linux上的执行权限，apache无法进入该文件夹。