jQuery UI 대화상자 - 닫기 아이콘 누락
커스텀 jQuery 1.10.3 테마를 사용하고 있습니다.테마롤러에서 바로 다운받아서 일부러 변경하지 않았습니다.
하면, 빈 됩니다.
페이지에 생성된 코드를 비교했습니다.
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<spanid="ui-id-2" class="ui-dialog-title">Title</span>
<button class="ui-dialog-titlebar-close"></button>
</div>
[ Dialog Demo ]페이지에서 생성된 코드에 대해서:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
편집
코드의 다른 부분은 제가 아닌 jQueryUI에 의해 생성되기 때문에 jqueryui js 파일을 편집하지 않고 span 태그를 추가할 수 없습니다.이것은 정상적인 기능을 실현하기 위한 잘못된/불필요한 선택이라고 생각됩니다.
다음은 코드의 해당 부분을 생성하는 데 사용되는 JavaScript입니다.
this.element.dialog({
appendTo: "#summary_container",
title: this.title(),
closeText: "Close",
width: this.width,
position: {
my: "center top",
at: ("center top+"+(window.innerHeight*.1)),
collision: "none"
},
modal: false,
resizable: false,
draggable: false,
show: "fold",
hide: "fold",
close: function(){
if(KOVM.areaSummary.isVisible()){
KOVM.areaSummary.isVisible(false);
}
}
});
저는 막막해서 도움이 필요해요.
좀 늦긴 했지만 네 마음을 날려버릴 거야, 준비됐어?
이것이 발생하는 이유는 jquery-ui를 호출한 후 부트스트랩을 호출했기 때문입니다.
말 그대로 다음 대신 두 가지를 바꿉니다.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
이 되다
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
편집 - 2015년 6월 26일 - 몇 개월 후에도 계속 관심을 끌기 때문에 편집 가치가 있다고 생각했습니다.저는 사실 이 답변 아래에 있는 코멘트에 제시된 noConflict 솔루션이 매우 마음에 들고 사용자 Pretty Cool이 별도의 답변으로 명확하게 설명했습니다.일부에서는 스크립트 스왑 시 부트스트랩 툴팁에 관한 문제가 보고되었습니다.툴팁 없이 jquery UI를 다운받았기 때문에 부트스트랩으로 인해 필요하지 않았기 때문에 그 문제는 발생하지 않았습니다.그래서 이 문제는 나에게 전혀 떠오르지 않았다.
편집 - 7월 22일 편집 - 혼동하지 마세요
jquery-uijqueryBootstrap 는 JavaScript 、 jQuery 、 jQuery - UI 、 boot boot boot boot boot boot 。 ★★★★★★★★★★★★★★★★★.jquery-ui.js은 can can can can can can can can canbootstrap.min.js와 동시에 , 「」를 참조해 주세요.jquery.js부트스트랩 전에 항상 로드해야 합니다.
이것은 상위 답변에 대한 코멘트이지만, 그 문제에 대한 답변에 도움이 되었기 때문에 나름대로의 답변이 가치가 있다고 느꼈습니다.
JQuery UI 한 경우), 합니다(JQuery UI 후에 ).$(document).ready( https://stackoverflow.com/a/23428433/4660870) 에서 응답) 버튼을 다시 표시할 수 있습니다.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
이는 jQuery 출하방식의 버그로 보입니다.이벤트에 대한 돔 조작을 통해 수동으로 수정할 수 있습니다.
$("#selector").dialog({
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
}
});
다음 세 가지 수정 사항을 찾았습니다.
- 부츠랩을 먼저 장착하면 됩니다.그리고 그들은 jquery-ui를 싣는다.하지만 그건 좋은 생각이 아니야.콘솔에 오류가 표시되기 때문입니다.
이것은, 다음과 같습니다.
var bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton;도움이 돼요. 하지만 다른 버튼들은 끔찍해 보여요.그리고 지금은 부트스트랩 버튼이 없습니다.
부츠랩 스타일과 아이콘이 있는 닫기 버튼을 사용하고 싶습니다.다음을 수행했습니다.
.ui-dialog-titlebar-close { padding:0 !important; } .ui-dialog-titlebar-close:after { content: ''; width: 20px; height: 20px; display: inline-block; /* Change path to image*/ background-image: url(themes/base/images/ui-icons_777777_256x240.png); background-position: -96px -128px; background-repeat: no-repeat; }
이것은 1.10에서 파손된 것으로 보고됩니다.
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
2013년 1월 29일 오전 7시 36분에 필립이 말했다:CDN 버전에서는 대화상자 닫기 버튼이 없습니다.버튼 태그만 있고 span ui-icon은 missong입니다.
이전 버전을 다운받았는데 닫기 버튼의 X가 다시 표시됩니다.
저도 같은 문제가 있었습니다.아마도 이미 체크하셨을지도 모르지만 이미지 폴더를 jquery-ui.css와 같은 장소에 배치하는 것만으로 해결이 되었습니다.
같은 문제에 휘말려서 위의 모든 제안을 읽고 실행한 후 이 이미지(여기 참조)를 다운로드하여 앱과 voila의 이미지 폴더에 저장한 후 CSS에서 수동으로 대체하려고 했습니다.문제가 해결되었습니다!
CSS는 다음과 같습니다.
.ui-state-default .ui-icon {
background-image: url("../img/ui-icons_888888_256x240.png");
}
오래된 질문이지만 jquery-ui v1.12.0에서 문제가 발생했습니다.
단답 - 다음 폴더가 있는지 확인합니다.Images당신이 가지고 있는 같은 장소에서jquery-ui.min.css 폴더에는
장답
문제는 gulp을 사용하여 모든 css 파일을 하나의 파일로 병합한다는 것입니다.때는 제가 '아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.jquery-ui.min.css. 에는 "css"라는 가 필요합니다Images이 폴더 내에는 기본 아이콘이 있어야 합니다.gulp은 새로운 대상에 이미지를 복사하지 않았기 때문에 x 아이콘을 표시하지 않았습니다.
저는 jQuery UI 1.8.17을 사용하고 있는데, 같은 문제가 있었습니다.또, 타이틀 바의 색상을 포함한 페이지에 추가의 css 스타일 시트를 적용하고 있었습니다.그래서 다른 문제를 피하기 위해 아래 코드를 사용하여 정확한 UI 요소를 대상으로 했습니다.
$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();
그런 다음 대화상자 자체의 속성에 닫기 버튼을 추가했습니다.
modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...
어떤 이유에서인지 두 가지 아이템을 모두 공략해야 했지만, 효과가 있었어요!
jquery-ui 후에 부트스트랩을 로드해도 다음과 같이 수정할 수 있었습니다.
.ui-dialog-titlebar-close:after {
content: 'X' !important;
position: absolute;
top: -2px;
right: 3px;
}
현명한 사람이 날 도와줬지
다음 폴더:jquery-ui.css가 있는 경우 "folder"라는 이름의 폴더를 만들고 다음 파일을 그 폴더에 복사합니다.
ui-icons_44444_256x240.png
ui-icons_5555_256x240.png
ui-icons_777620_256x240.png
ui-icons_tv777_256x240.png
ui-icons_cc0000_256x240.png
ui-icons_ffffff_256x240.png
닫기 아이콘이 나타납니다.
참고로 @john-macintyre의 제안에 따라 오픈 메서드를 확장했습니다.
$.widget( "ui.dialog", $.ui.dialog, {
open: function() {
$(this.uiDialogTitlebarClose)
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
// Invoke the parent widget's open().
return this._super();
}
}); just add in css
.ui-icon-closethick{
margin-top: -8px!important;
margin-left: -8px!important;
}
js 함수 내에서 dialog()를 호출하는 경우 다음 부트스트랩버튼 컨플릭트코드를 사용할 수 있습니다.
<div class="row">
<div class="col-md-12">
<input type="button" onclick="ShowDialog()" value="Open Dialog" id="btnDialog"/>
</div>
</div>
<div style="display:none;" id="divMessage">
<table class="table table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Giri</td>
<td>Prasad</td>
<td>25</td>
</tr>
<tr>
<td>Bala</td>
<td>Kumar</td>
<td>24</td>
</tr>
</table>
</div>
<script type="text/javascript">
function ShowDialog()
{
if (typeof $.fn.bootstrapBtn =='undefined') {
$.fn.bootstrapBtn = $.fn.button.noConflict();
}
$('#divMessage').dialog({
title:'Employee Info',
modal:true
});
}
</script>
누락된 항목을 추가합니다.
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
저도 이 문제가 있어요.닫기 버튼에 삽입되는 코드는 다음과 같습니다.
버튼에서 style="display:none:"을 끄면 닫기 버튼이 나타납니다.어떤 이유로 인해 "none"이 설정되고 있는데 어떻게 제어해야 할지 모르겠습니다.이 문제를 해결하는 또 다른 방법은 단순히 display: none을 덮어쓰는 것입니다.하지만 어떻게 해야 할지 모르겠어.
KyleMit이 올린 답변은 작동하지만 다른 모양의 X버튼을 만듭니다.
또한 이 문제는 페이지의 모든 대화상자에 영향을 주는 것이 아니라 일부 대화상자에만 영향을 미칩니다.일부 대화 상자는 예상대로 작동하고 다른 대화 상자는 닫힘 버튼이 있는 동안 제목이 없습니다(즉, 제목이 포함된 범위가 비어 있음).
뭔가 심각한 문제가 있는 것 같아서 1.10.x 시간이 아닐 수도 있어요.
그러나 작업을 계속한 결과, 타이틀이 올바르게 설정되어 있지 않은 경우가 있는 것을 알게 되었고, 수정 후 X 클로즈 버튼이 원래대로 다시 표시되게 되었습니다.
예전에는 이렇게 제목을 설정했어요.
('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);
이 ID는 내 코드에 존재하지 않지만 ac-popup과 ui-dialog-title에서 jquery로 작성되었습니다.약간 찌질한 것 같아.하지만 더 이상 작동하지 않으며 대신 다음을 사용해야 합니다.
$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);
그 후, 버튼의 누락은 확실히 관계가 있는지는 모르겠지만, 조금 나아진 것 같습니다.
JQuery-ui.js 버전이 1.10.3인 경우에도 jquery-ui-1.12.1.min.js를 참조한 후 닫기 버튼이 표시되기 시작했습니다.
언급URL : https://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon
'itsource' 카테고리의 다른 글
| 값이 변경된 값 및 열을 선택하십시오. (0) | 2022.09.04 |
|---|---|
| 프라이머리 키를 1000부터 시작하는 방법 (0) | 2022.09.04 |
| Firebase Error:함수 쿼리여기서()이 유효하지 않은 데이터로 호출되었습니다.지원되지 않는 필드 값: 정의되지 않음 (0) | 2022.09.04 |
| MySQL의 높은 CPU 사용률 (0) | 2022.09.04 |
| 치명적인 오류: 유효하지 않은 히프 제한 부근의 마크 콤팩트 할당 실패 - Ionic 3의 JavaScript 힙 메모리 부족 (0) | 2022.09.04 |