jQuery UI로 화면 모달의 일부만 만들기

jQuery 대화 상자에 모달 '범위'를 만들 수있는 방법이 있습니까?jQuery UI로 화면 모달의 일부만 만들기

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Console</title> 

     <link href="console.css" rel="stylesheet" type="text/css" /> 
     <link href="libs/jquery-ui/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="libs/jquery/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript" src="libs/jquery-ui/jquery-ui-1.8.13.custom.min.js"></script> 
    </head> 

    <body> 
     <div id="toolbar"></div> 
     <div id="mainContent"></div> 
     <div id="footer"></div> 
    </body> 
</html>

내가 mainContent 영역에 대한 몇 가지 모달 대화 상자를 만들려면 : 다소 인위적인 예를 들어, 한 페이지를 가지고있다. 대화 상자가 열려있을 때 주 콘텐트 영역과의 상호 작용을 허용하지 않고 도구 모음과 바닥 글과의 상호 작용을 허용합니다.

페이지에 여러 개의 메인 컨텐츠와 같은 div가있는 경우 각 div에는 다른 div와의 상호 작용을 허용하는 독립적 인 모달 대화 상자가 있습니다.

jQuery UI 라이브러리를 사용하여 모달 대화 상자를 만드는 방법을 알고 있습니다. 제 질문은 특히이 라이브러리를 사용하거나이 라이브러리를 쉽게 보완하는 방식으로 전체 페이지가 아닌 페이지 섹션에 양식을 적용하는 것입니다.

출처

2011-06-10 Jeff

간단한 솔루션은 오버레이 역할을하는 숨겨진 div를 갖는 것입니다. 그것은 항상 당신의 "mainContent"div와 같은 차원과 위치를가집니다. 그런 다음 Z- 색인을 사용하여 콘텐츠 상단에 div를 표시하십시오. 그런 다음 모달을 오버레이 위에 놓습니다.

넷 효과는 모든 내용이 오버레이로 주 콘텐츠 영역에 포함되지만 모달은 오버레이 위에 놓이게되므로 사용자는 오버레이와 만 상호 작용할 수 있습니다.

편집 :

Z 인덱스 관리 : 그냥 다른 Z-지수와의 충돌을 피하기 위해 기저 번호 오버레이 Z- 색인을 설정할 것이다. 그런 다음 모달을 표시 할 때마다 jquery 선택기를 사용하여 표시된 오버레이를 찾고 모달 z- 색인을 그 수만큼 증가시킵니다.

.Overlay 
{ 
    z-index: 200; 
} 

.Modal 
{ 
    //... 
} 

function ShowModal(modalId) 
{ 
    var maxZIndex = 200; 
    $('.Overlay :visible').each(function() //find all visible overlays 
    { 
     var currZIndex = $(this).attr('z-index'); 
     maxZIndex = currZIndex > maxZIndex ? currZIndex : maxZIndex; //max, min alg. 
    } 
    $('#' + modalId).attr('z-index', maxZIndex + 1); 
    //... do some positioning of modal here 
    $('#' + modalId).show(); 
}

위치 : 당신은 원하는 영역 위에 오버레이의 위치를 자바 스크립트를 작성해야합니다. 나는 절대 위치 지정을 사용하는 것이 이것을 쉽게 만들 것이라고 생각할 것이다. 그런 다음 분명히 모달 div를 오버레이 div의 가운데에 배치해야합니다.

계산은 실제로 중심에 배치하는 것이 어렵지 않습니다. 너가 그 조각을하기에 나의 포획을 원한다면 나에게 알려줘.

출처

2011-06-10 15:45:45

이 접근 방식에 대한 몇 가지 질문/의견. 나는 원래의 문제의 일부이기 때문에 더 이상 대화 상자를 모달 화하지 않을 것이라고 가정합니다. 대화 상자와 이러한 오버레이 모두에 대해 수동으로 Z- 색인을 관리해야합니까, 아니면 대화 상자 오버레이를 가져오고 오버레이를 설정하는 방법이 있습니까? jQuery 대화 상자가 자동으로 상위 구성 요소의 가운데에 배치되는지 또는이 프로세스를 구축하는 데 필요한 다른 논리 비트인지 알 수 있습니까? – Jeff

@Jeff 귀하가 요청한 문제를 해결하기 위해 제 답변에 의견을 추가했습니다. –

이 솔루션을 참조 할 수있는 페이지가 있습니까? 이상적인 솔루션은 의사 HTML 코드로 훌륭합니다. 직접 해보고 그것을 여기에 올리십시오 :) – krizajb

jQuery UI로 화면 모달의 일부만 만들기

답변

관련 문제