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

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>

这会导致问题:

<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处理:

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

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

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

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

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

我也有同样的问题，只是将这个函数添加到打开的对话框选项中，它就工作了。

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

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

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

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

这对我有用。

只是链接CSS为我工作。它可能在我的项目中完全缺失:

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

这是一个很好的答案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>

文件添加的顺序很重要!

你需要在"ok"周围加上引号。这是按钮的文本。事实上，按钮的文本当前是空的(因此不显示)，因为它正在尝试解析该变量的值。

模态对话框不意味着以任何方式关闭，除了按下[确定]或[取消]按钮。如果你想让[x]出现在右上角，设置modal: false或者直接删除它

一个解决方案可以在你的模态中有关闭

看一下这个简单的例子

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

所以一个快速的chmod +x dir-name，以及子文件夹，完成了这个任务。

如果没有linux上的execute权限，apache无法进入目录。

我的解决方案是把这个

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

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

相关内容

最新更新

热门标签：