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>

온 생성 된 코드에 대한 대화 데모 페이지 :

<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 태그를 추가 할 수는 없습니다.

다음은 코드의 해당 부분을 생성하는 데 사용되는 자바 스크립트입니다.

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>

:)

편집-26/06/2015-이것은 몇 달 후에도 계속 관심을 끌기 때문에 편집 할 가치가 있다고 생각했습니다. 나는 실제로이 답변 아래의 의견에 제공된 noConflict 솔루션을 정말 좋아하며 사용자 Pretty Pretty가 별도의 답변으로 설명합니다. 일부 스크립트에서 스크립트를 교체 할 때 부트 스트랩 툴팁에 문제가보고되었습니다. 부트 스트랩 때문에 필요하지 않은 툴팁없이 jquery UI를 다운로드했기 때문에이 문제가 발생하지 않았습니다. 그래서이 문제는 결코 나에게 나타나지 않았습니다.

편집 - 22/07/2015 - 혼동하지 마십시오 jquery-ui과 함께 jquery! Bootstrap의 JavaScript는 jQuery를로드해야하지만 jQuery-UI에 의존하지는 않습니다. 따라서 부트 스트랩 이전에 항상로드해야 하지만, jquery-ui.js이후 bootstrap.min.js에 로드 할 수 있습니다 jquery.js.

이것은 최고 답변에 대한 의견이지만 문제에 대한 답변을 얻었으므로 자체 답변의 가치가 있다고 생각했습니다.

JQuery UI 이후에 Bootstrap을 선언 상태로 유지하려면 (Bootstrap 툴팁을 사용하고 싶었 기 때문에) 다음을 선언 $(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가 제공하는 방식에 버그로 보입니다. Dialog Open이벤트 에서 일부 dom 조작으로 수동으로 수정할 수 있습니다 .

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

이것은 1.10에서 깨진 것으로보고

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip은 2013 년 1 월 29 일 오전 7시 36 분에 다음과 같이 말했습니다. CDN 버전에서는 대화 상자 닫기 버튼이 없습니다. 버튼 태그 만 있고 span ui-icon은 missong입니다.

이전 버전을 다운로드했으며 닫기 버튼의 X가 다시 표시됩니다.

세 가지 수정 사항을 찾았습니다.

1. 부트 스트랩을 먼저로드 할 수 있습니다. 그리고 그들은 jquery-ui를로드합니다. 그러나 좋은 생각이 아닙니다. 콘솔에 오류가 표시되기 때문입니다.

2. 이:

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

   도움이됩니다. 그러나 다른 버튼은 끔찍해 보입니다. 그리고 지금 우리는 부트 스트랩 버튼이 없습니다.

3. 부트 스트랩 스타일을 사용하고 아이콘이있는 닫기 버튼을 원합니다. 나는 다음을 수행했다.

   수정 후 닫기 버튼의 모양

   .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;
   }

나는 똑같은 문제가 있었을 것입니다. 아마도 이미 이것을 chececked했지만 jimage-ui.css와 동일한 위치에 "images"폴더를 배치하여 해결했습니다.

나는 같은 문제에 갇히고 위의 모든 제안을 읽은 후에 CSS 에서이 이미지 ( 여기 에서 찾을 수 있음 )를 다운로드 한 후 내 앱의 이미지 폴더에 저장하려고했습니다. 문제 해결됨!

CSS는 다음과 같습니다.

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

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 v1.12.0 에서이 문제가 발생했습니다.

짧은 대답 했는지를 확 인하라는 폴더가 Images에 같은 장소 당신이를jquery-ui.min.css . 이미지 폴더에는 jquery-ui를 새로 다운로드 한 이미지를 포함해야합니다.

긴 대답

내 문제는 gups를 사용하여 모든 CSS 파일을 단일 파일로 병합한다는 것입니다. 그렇게하면의 위치가 변경 jquery-ui.min.css됩니다. 대화 상자의 CSS 코드 Images는 동일한 디렉토리에있는 폴더를 기대 하고이 폴더 안에는 기본 아이콘이 필요합니다. gulp가 이미지를 새 대상으로 복사하지 않았기 때문에 x 아이콘이 표시되지 않았습니다.

참고로 이것은 @ john-macintyre의 제안에 따라 open 메소드를 확장 한 방법입니다.

$.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>

현명한 사람이 한 번 나를 도와주었습니다.

있는 폴더에 jquery-ui.css"images"라는 폴더를 만들고 아래 파일을 여기에 복사하십시오.

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

닫기 아이콘이 나타납니다.

누락 된 부분을 추가하십시오.

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

이 문제도 있습니다. 닫기 버튼에 삽입되는 코드는 다음과 같습니다.

버튼에서 style = "display : none :"을 끄면 닫기 버튼이 나타납니다. 따라서 어떤 이유로 표시됩니다 : 없음; 설정 중이며 제어 방법을 알 수 없습니다. 따라서이 문제를 해결하는 또 다른 방법은 단순히 display : none을 재정의하는 것입니다. 그래도 방법을 보지 마십시오.

KyleMit이 게시 한 답변은 효과가 있지만 다른 모양의 X 버튼을 만듭니다.

또한이 문제는 내 페이지의 모든 대화 상자가 아니라 일부 대화 상자에 영향을 미칩니다. 일부 대화 상자는 예상대로 작동합니다. 닫기 버튼이있는 동안 다른 제목이 없습니다 (예 : 제목을 포함하는 범위가 비어 있음).

뭔가 잘못되었다고 생각하고 1.10.x의 시간이 아닐 수도 있습니다.

그러나 추가 작업을 한 후 제목이 올바르게 설정되지 않은 것을 발견하고 수정 한 후 X 닫기 버튼이 다시 나타납니다.

나는 제목을 다음과 같이 설정했다.

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

해당 코드는 내 코드에 존재하지 않지만 ac-popup 및 ui-dialog-title의 jquery에 의해 생성됩니다. kludge의 종류. 그러나 더 이상 작동하지 않는다고 말 했으므로 대신 다음을 사용해야합니다.

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

그렇게 한 후에 누락 된 버튼 문제가 더 나은 것처럼 보이지만 확실하게 관련되어 있는지 확실하지 않습니다.

jquery-ui 이후 부트 스트랩을로드하더라도 다음을 사용하여 수정할 수있었습니다.

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}