[javascript] 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);
        }
    }
});

나는 길을 잃었고 도움이 필요하다. 미리 감사드립니다.

답변

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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

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