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

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



$("#dialog-modal").dialog({

            modal: true,

            autoOpen: false,

            buttons: {

                Ok: function () {

                    $(this).dialog("close");

                }

            }

        });
837   15  

15 ответов:

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

37  
2011-12-30 20:36:50

другая возможность заключается в том, что у вас есть библиотека начальной загрузки. Некоторые версии bootstrap и jQuery-ui имеют конфликт с ними .метод button (), и если ваш 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>
180  
2013-08-23 17:00:09

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

$.fn.bootstrapBtn = $.fn.button.noConflict();
38  
2015-06-23 17:40:35

чистый 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);
}
18  
2016-02-05 09:33:28

хотя op явно не заявляет, что они используют 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>');
        }
    });
12  
2013-07-26 00:19:41

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

5  
2013-06-13 10:41:11

используя принцип идеи 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 Translate.

5  
2014-05-07 14:18:18

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

4  
2011-12-30 20:19:32

у меня была такая же проблема, просто добавьте эту функцию в параметры открытого диалога, и она работала 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");
4  
2016-01-12 16:49:41

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

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

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

3  
2013-09-08 18:39:37

вот отличный ответ 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>
2  
2017-05-23 15:26:06

просто связывание CSS работало для меня. Возможно, он полностью отсутствовал в моем проекте:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
1  
2017-08-06 18:45:25

нужно добавить кавычки вокруг "ОК". Это текст кнопки. Как бы то ни было, текст кнопки в настоящее время пуст (и, следовательно, не отображается), потому что он пытается разрешить значение этой переменной.

модальные диалоги не должны быть закрыты каким-либо образом, кроме нажатия кнопок [ok] или [отмена]. Если вы хотите [x] в правом углу, установите modal: false или просто удалите его полностью.

0  
2011-12-30 19:03:47

решение может иметь закрытие внутри вашего модального

посмотри этой простой пример:

0  
2011-12-30 20:13:41

У меня была аналогичная проблема. Я использовал jquery и jquery-ui. Когда я обновил свои версии, изображение закрытого диалога больше не появлялось. Моя проблема заключалась в том, что когда я распаковал пакет js, который я загрузил, каталоги не имели разрешения на выполнение.

Так что быстрый chmod +x dir-name, а также для подпапок, сделал трюк. Без разрешения execute на linux, apache не может попасть в папку.

0  
2017-03-02 00:37:44

Comments

    Ничего не найдено.
Click here to cancel reply.