jQueryUI 모달 대화 상자에 닫기 버튼 (x)이 표시되지 않음

jQueryUI 모달 대화 상자에 닫기 버튼 (x)이 표시되지 않음

---

ASP .NET MVC 3 응용 프로그램에서 jQuery 모달 대화 상자를 사용하고 있습니다. 오른쪽 상단 모서리에 닫기 버튼이 표시되지 않는 것을 제외하고는 잘 작동합니다. 어떻게 추가 할 수 있습니까?

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });

---

대화 상자의 오른쪽 상단에서 버튼이 있어야 하는 위치에 마우스를 올려 놓고 효과가 나타나는지 여부를 확인 합니다 (버튼 마우스 오버 ). 그것을 클릭하고 닫히는 지 확인하십시오. 닫히면 패키지 다운로드와 함께 제공된 이미지 스프라이트가 누락 된 것입니다.

---

또 다른 가능성은 부트 스트랩 라이브러리가 있다는 것입니다. 일부 버전의 부트 스트랩 및 jquery-ui는 .button () 메서드와 충돌하며, bootstrap.js가 jquery-ui.js 다음에 배치되면 부트 스트랩 .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();

---

순수 CSS 해결 방법 :

부트 스트랩과 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와 부트 스트랩을 함께 사용하고 있음을 명시 적으로 나타내지 않지만 그렇게하면 동일한 문제가 발생합니다. jquery ui (js) 이전에 부트 스트랩 (js)을로드하여 문제를 해결할 수 있습니다. 그러나 버튼 상태 색상에 문제가 발생합니다.

최종 해결책은 부트 스트랩 또는 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

---

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 번역을 사용하고 있습니다.

---

문제는 브라우저가 X 아이콘이 포함 된 jQueryUI 이미지 스프라이트를로드 할 수 없다는 것입니다. 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();
} 
...

이것은 나를 위해 일했습니다.

---

다음은 훌륭한 답변입니다 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>

---

Just linking the CSS worked for me. It may have been missing from my project entirely:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

---

You need to add quotes around the "ok". That is the text of the button. As it is, the button's text is currently empty (and hence not displayed) because it is trying to resolve the value of that variable.

Modal dialogs aren't meant to be closed in any fashion other than pressing the [ok] or [cancel] buttons. If you want the [x] in the right hand corner, set modal: false or just remove it altogether.

---

a solution can be having the close inside your modal

take a look at this simple example

---

I had a similar issue. I was using jquery and jquery-ui. When I upgraded my versions, the close dialog image no longer appeared. My problem was that when I unzipped the js package that I downloaded, the directories did not have the execute permission.

So a quick chmod +x dir-name, and also for the sub-folders, did the trick. Without the execute permission on linux, apache cannot get into the folder.

참고URL : https://stackoverflow.com/questions/8681707/jqueryui-modal-dialog-does-not-show-close-button-x