이미지가 클릭할 때 나타나는 대화 상자를 만들어야 합니다. 문제는 실제로 큰 z 인덱스(예: 500개)가 있고 ui 대화 상자가 해당 요소의 뒷면에 있다는 것입니다.
사용자: "raducup"에 로그인하여 다음을 전달해야 하는 페이지입니다.1. 또 다른 문제는 대화상자 닫기를 클릭하면 객체가 사라지는 것이에요.
이미지를 클릭할 때 호출하는 함수입니다.
function openItem(obiect){
$( obiect ).css('zIndex',9999);
$( obiect ).dialog({
dialogClass: "no-close",
modal: true,
draggable: true,
overlay: "background-color: red; opacity: 0.5",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
reparaZindex();
}
당신은 말하지 않지만, 당신은 jQuery UI 1.10을 사용하고 있습니다.
jQuery UI 1.10에서 'zIndex' 옵션이 제거되었습니다.
제거된 zIndex 옵션
스택 옵션과 마찬가지로 zIndex 옵션은 필요하지 않습니다. 적절한 스택 구현. z 인덱스는 CSS에 정의되어 있으며 스택은 이제 포커스가 있는 대화 상자가 마지막이 되도록 하여 제어됩니다.
요소가 상위 요소에 있습니다.
css를 사용하여 대화 상자를 맨 위에 설정해야 합니다.
.ui-dialog { z-index: 1000 !important ;}
요소의 기본 스타일링을 재정의하려면 '!important' 키가 필요합니다. 이 키는 'dialogClass' 옵션에만 설정하고 스타일을 지정해야 하는 경우 모든 대화상자에 영향을 미칩니다.
모달 대화 상자 세트가 필요한 경우 'modal: true' 옵션을 참조하십시오. [docs][1]:
true로 설정하면 대화상자에 모달 동작이 발생하고, 다른 항목은 다음에 표시됩니다. 페이지가 비활성화됩니다. 즉, 상호 작용할 수 없습니다. 모달 대화상자는 대화상자 아래에 다른 페이지 위에 오버레이를 만듭니다. 요소.
이렇게 하려면 더 높은 z 인덱스로 모달 오버레이를 설정해야 합니다.
.ui-front { z-index: 1000 !important; }
이 요소도 마찬가지입니다.
[1]: http://api.jqueryui.com/dialog/# 옵션-수정
Jquery 대화 방법을 시도할 수 있습니다.
$( ".selector" ).dialog( "moveToTop" );
참조: http://api.jqueryui.com/dialog/ # 모베로토프 방법
하지만 여러 가지 제안 임무야, 내가 볼 수 있도록 최대한 ᅴ 보세요들 부러진 대화가 제어입니다 현재 포함한다.
이 때문에 내가 말하는 나는 내 페이지로 대화를 포함), 그리고 그 뒤에 다른 요소를 투명하고 모달 블랭킹 div 가 올라왔다. # 39, can& 있는 t 금방!
결국 내가 다른 게시물 기반으로 개발된 이 글로벌 솔루션, 확장명으로 대화에 나오도록 위젯. # 39 m, I& 작동하잖아 가져다줄래요 하지만 잘 모르는 것이 있으면 어떻게 내가 내에서 열린 대화를 한다.
이 모든 것을 할 수 있는 다른 진데스 찾습니다 페이지에서든 .ui-widget-overlay 이동 중 하나일 자신을 더 높은, 그리고 높은 수준이라고 한다.
$.widget("ui.dialog", $.ui.dialog,
{
open: function ()
{
var $dialog = $(this.element[0]);
var maxZ = 0;
$('*').each(function ()
{
var thisZ = $(this).css('zIndex');
thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
if (thisZ > maxZ) maxZ = thisZ;
});
$(".ui-widget-overlay").css("zIndex", (maxZ + 1));
$dialog.parent().css("zIndex", (maxZ + 2));
return this._super();
}
});
덕분에 다음, 이를 통해 잡을라는데 정보 어디서 어떻게 이 작업을 수행할 수 있습니다. https://stackoverflow.com/a/20942857
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
내, 내가 할 수 있는 요소 사이의 샌드위치 화면, 모달 대화 후 내 요소점 위에 들어올리십시오 모달 화면 들어올리십시오 그들위에 대화상자는 내 요소.
내가 가진 작은 성공 요소 '에서 다음과 같이 대화상자의 만든 후 $ 대화상자'.
$dlg.closest('.ui-dialog').css('zIndex',adjustment);
각) 대화상자에는 시작 이후 다른 'z-인덱스' (그들은 증분식으로 커질 경우) '와' 내가 버는 조정량이 문자열으로 향상시키십시오 값을 다음과 같습니다.
const adjustment = "+=99";
그러나 그냥 계속 올리고 있어 jQuery 를 통해 모달 대화, 진데스 가치에 대해 '샌드위치' 두 번째 화면, 그래서 더 이상 했다. 내가 ";;; false" ᅴ 대화 포기한 modal" 그것으로이라엘 " 바로 내 스스로 만든 모달. It 흉내 이케리위 당근이지를. 이것은:
CoverAll = {};
CoverAll.modalDiv = null;
CoverAll.modalCloak = function(zIndex) {
var div = CoverAll.modalDiv;
if(!CoverAll.modalDiv) {
div = CoverAll.modalDiv = document.createElement('div');
div.style.background = '#aaaaaa';
div.style.opacity = '0.3';
div.style.position = 'fixed';
div.style.top = '0';
div.style.left = '0';
div.style.width = '100%';
div.style.height = '100%';
}
if(!div.parentElement) {
document.body.appendChild(div);
}
if(zIndex == null)
zIndex = 100;
div.style.zIndex = zIndex;
return div;
}
CoverAll.modalUncloak = function() {
var div = CoverAll.modalDiv;
if(div && div.parentElement) {
document.body.removeChild(div);
}
return div;
}
'는' 모베로토프 적절한 방법으로.
z-인덱스 올바르지 않습니다. 하지만 계속해서 부동 소수점 아래 여러 대화상자의 작동하잖아 처음에 한 함께 z-인덱스 변경할 수 있습니다. No good.
'' 등록 정보 대화 객체에는 진데스 추가:
$(elm).dialog(
zIndex: 10000
);