Я использую модальный диалог jQuery в моем приложении ASP.NET MVC 3. Он отлично работает, за исключением того, что в правом верхнем углу нет ни одной кнопки. Как я могу добавить это?
$("#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
Это работает (видимый флажок):
<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();
Обходное решение Pure 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 вместе, аналогичная проблема возникает, если вы это делаете. Вы можете решить проблему, загрузив 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>');
}
});
Просто проверьте путь изображения кнопки закрытия в 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
Используя принцип идеи, пользователь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.
Я думаю, проблема в том, что браузер не смог загрузить образ справки jQueryUI, содержащий значок X. Пожалуйста, используйте Fiddler, Firebug или некоторые другие, которые могут предоставить вам доступ к HTTP-запросам, которые браузер делает на сервере, и проверить, что спрайт изображения загружен успешно.
У меня была такая же проблема, просто добавьте эту функцию в параметры открытого диалога, и она сработала 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");
Я предполагаю, что в вашем коде есть конфликт с другой JS-библиотекой. Попробуйте показать кнопку закрытия:
...
open:function () {
$(".ui-dialog-titlebar-close").show();
}
...
Это сработало для меня.
Вот отличный ответ fooobar.com/questions/94190/... Я тестировался с помощью:
<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>
Просто связь CSS помогла мне. Возможно, он полностью отсутствовал в моем проекте:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Вам нужно добавить кавычки вокруг "ok". Это текст кнопки. Как бы то ни было, текст кнопки в настоящее время пуст (и, следовательно, не отображается), потому что он пытается разрешить значение этой переменной.
Модальные диалоги не предназначены для закрытия любым способом, кроме нажатия кнопок [ok] или [cancel]. Если вы хотите [x] в правом углу, установите modal: false или просто удалите его вообще.
решение может находиться внутри вашего модального
взгляните на этот простой пример
У меня была аналогичная проблема. Я использовал jquery и jquery-ui. Когда я обновил свои версии, изображение закрытого диалогового окна больше не появлялось. Моя проблема заключалась в том, что когда я распаковывал пакет js, который я загрузил, каталоги не имели разрешения на выполнение.
Итак, быстрый хмм + х dir-name, а также для подпапок, сделал трюк. Без разрешения на выполнение в linux apache не может попасть в папку.