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

Question

我在ASP .NET MVC 3应用程序中使用了jQuery模式对话框.它工作正常,除了右上角没有关闭按钮.我该如何添加？

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

Answer 1

另一种可能性是你有自举库.某些版本的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>

Answer 2

在该对话框的右上角,鼠标悬停在按钮应该可以了,而是看是否你得到一些效果(按钮悬停).尝试点击它,看它是否关闭.如果它关闭了,那么你只是错过了包下载附带的图像精灵.

Answer 3

我有这个问题,并能够通过下面的声明解决它.

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

如果英语不好原谅我,我正在使用谷歌翻译.

Answer 8

我遇到了同样的问题，只需将此功能添加到打开的对话框选项中即可，效果很好

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