jQuery로 모달 팝업 작성

모달 윈도우의 작동 방식을 이해하려고합니다. 나도 알아, 거기에 여러 플러그인이 있지만 내 자신의 - 간단한 하나를 작성하고 싶습니다.jQuery로 모달 팝업 작성

- 페이지에서 일부 요소를 클릭하면 숨겨진 레이어를 표시하는 jquery 함수를 추가 할 수 있습니다.

- 페이지 내용 위에로드 할 수 있지만 CSS를 조정할 수는 있지만 아직 몇 가지 방법을 잘 모릅니다.

예를 들어 나머지 페이지가 창 아래로 사라지게하려면 어떻게해야합니까?

감사합니다.

2011-03-17 santa

모달 콘텐츠와 나머지 페이지 사이에는 다른 레이어를 사용해야합니다. 이것을 일반적으로 오버레이라고합니다. 오버레이는 검정 또는 흰색 (보통)으로 색칠되어 있으며 약간 불투명합니다. 오버레이가 신체/HTML의 크기에 의해 제한되지 않도록 최상의 결과를

는

body, html  { width: 100%; height: 100% }

을 설정합니다. 당신이 문제에 실행을 시작

var overlay = $('<div />').css({opacity: '.8' }).addClass('overlay'); 
$('body').append(overlay);

는 Z- 인덱스 제어 요소의 상단에 드롭 다운 목록을 표시 같은 IE 6와 같은 이전 버전의 브라우저에 있습니다

div.overlay  { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 }

그런 다음 오버레이를 추가합니다. 이를 위해 콘텐츠 아래 숨겨진 iframe 기술을 사용해야합니다.

출처

2011-03-17 03:43:59

예를 들어 jQuery's dialog을 예로 들어보십시오. 명시된 너비와 높이 (자바 스크립트를 통해 동적으로 계산 됨)가 설정된 div 요소를 사용하며 절대적으로 왼쪽 상단에 위치합니다. 페이드 효과를 얻으려면 불투명도가있는 배경 이미지가 설정됩니다 (IE의 경우 filter: alpha(opacity = 50);도 적용).

마크 업 :

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div>

CSS :

.ui-widget-overlay 
{ 
    background-image: url('path/to/dark-image.png'); 
    opacity: 0.5; 
    left: 0; 
    position: absolute; 
    top: 0; 
}

출처

2011-03-17 03:49:26 wsanville

jQuery로 모달 팝업 작성

답변

관련 문제