Модальное диалоговое окно jQueryUI не показывает кнопку закрытия (x)

Question

Я использую модальное диалоговое окно jQuery в моем приложении ASP .NET MVC 3.Он работает нормально, за исключением того, что в правом верхнем углу нет кнопки закрытия.Как я могу добавить это?

$("#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

У меня была эта проблема, и я смог решить ее с помощью объявления ниже.

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

Answer 3

В правом верхнем углу диалогового окна наведите указатель мыши на то место, где должна быть кнопка , и убедитесь, что эффект получен (зависание кнопки).Попробуйте щелкнуть по нему и посмотреть, закрывается ли он.Если он закрывается, значит, вам просто не хватает ваших спрайтов изображений, которые пришли с вашей загрузкой пакета.

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

Хотя в операторе явно не указано, что они используют jquery ui и bootstrap вместе, возникает такая же проблема, если вы это делаете.Вы можете решить эту проблему, загрузив bootstrap (js) перед jquery ui (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

Используя принцип идеи, пользователь2620505 получил результат с реализацией 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 Translate.

Answer 7

Просто проверьте путь к изображению кнопки закрытия в вашем 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 8

У меня была такая же проблема, просто добавьте эту функцию в параметры открытого диалога, и она сработала sharm

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

Answer 9

Мне кажется, проблема в том, что браузер не смог загрузить спрайт изображения jQueryUI, содержащий значок X. Пожалуйста, используйте Fiddler, Firebug или другие, которые могут дать вам доступ к HTTP-запросам, которые браузер отправляет на сервер, и убедиться, что спрайт изображения успешно загружен.

Answer 10

Я полагаю, что в вашем коде есть конфликт с другой библиотекой JS. Попробуйте принудительно показать кнопку закрытия:

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

Это сработало для меня.