JQueryUI 模式对话框不显示关闭按钮(x)

我在 ASP 中使用了一个 jQuery 模态对话框。NET MVC 3应用程序。除了右上角没有显示关闭按钮之外，它工作得很好。我该怎么加上这个？

$("#dialog-modal").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
114418 次浏览
小开

你需要在“ ok”的前后加上引号。这是按钮的文本。实际上，按钮的文本当前是空的(因此不显示) ，因为它试图解析该变量的值。

除了按[确定]或[取消]按钮之外，模态对话框不应以任何方式关闭。如果你想要[ x ]在右边的角落，设置模式: false 或者干脆删除它。

小开

一个解决方案可以是封闭在您的模态内

看看 这个这个简单的例子

小开

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

小开
最佳答案

在对话框的右上角，鼠标移到按钮 应该所在的位置，可以看到你是否得到了一些效果(按钮悬停)。试着点击它，看看它是否关闭。如果它真的关闭了，那么你只是错过了随软件包下载而来的图像精灵。

小开

另一种可能性是您拥有引导程序库。引导程序和 jquery-ui 的某些版本与。方法，如果 bootstrap.js 放在 jquery-ui 之后。JS 鞋带。()覆盖您的 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>
小开

只需检查 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的路径

小开

虽然 op 没有明确说明它们同时使用了 jquery ui 和 bootstrap，但是如果这样做，也会发生同样的问题。您可以在 jquery ui (js)之前加载 bootstrap (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>');
}
});
小开

我认为在你的代码中有一些与其他 JS 库的冲突。尝试强制显示关闭按钮:

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

这招对我很管用。

小开

纯 CSS 解决方案:

我同时使用 bootstrap 和 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);
}
小开

利用 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>');
},
...

如果英语不好请原谅，我正在使用谷歌翻译。

小开

我有这个问题，并能够解决它与声明如下。

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

这是一个很好的答案 < a href = “ https://stackoverflow./a/31045175/3778527”> 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>

添加文件的顺序很重要！

小开

我有同样的问题，只是添加这个功能的开放对话框选项，它的工作沙姆沙姆

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

我也有过类似的问题。我用的是 jquery 和 jquery-ui。当我升级我的版本时，关闭对话框图像不再出现。我的问题是，当我解压缩我下载的 js 包时，目录没有执行权限。

因此，一个快速的 chmod + x dir-name 以及子文件夹就可以解决这个问题。如果没有 linux 上的执行权限，apache 就无法进入该文件夹。

小开

只要把 CSS 链接起来就可以了，可能我的项目中完全没有:

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

我的解决办法就是把这个

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

在所有 js 和样式表声明之后


提交答案