Jquery 팝업 레이어 플러그인 ThickBox_jquery를 사용하는 방법

Thickbox는 jQuery용 플러그인으로, 대화 상자와 웹 페이지 상자를 팝업하여 사용자 경험을 더욱 즐겁게 만들어주는 기능을 합니다.
면책조항: 이는 개인 요약 기록일 뿐입니다.
준비 작업: Thickbox.js, Thickbox.css, jquery.js의 세 가지 파일이 필요하며 온라인 어디에서나 다운로드할 수 있습니다

구체적인 용도:

1단계: Thickbox를 사용하려는 페이지에 이 세 파일을 삽입합니다

코드 복사 코드는 다음과 같습니다.

두 번째 단계: 일반적으로 간단한 사용은 라벨과 버튼에 스타일을 추가하는 것입니다: class=thickbox

tb_init(), tb_show()와 같은 Thickbox 함수 호출도 있습니다.

다양한 용도:

1. 사진을 보려면 클릭하세요:

응, 바로 그거야
2. 버튼이나 링크를 클릭하세요:

코드 복사 코드는 다음과 같습니다.

숨겨진 모달 콘텐츠 표시.

이것은 모덜리스 대화 상자입니다.

이것은 모달 대화 상자입니다.

지침: 두꺼운 상자를 사용하려는 에 "#TB_inline?height=300&width=400&"을 추가하세요. #TB_inline은 두꺼운 상자를 표시하기 위한 크기 매개변수입니다. -up 대화 상자. InlineId는 표시하려는 레이블이나 구성 요소에 대해 모드와 비모달 중에서 선택할 수 있습니다. 물론 많은 사용자 정의 매개 변수도 사용할 수 있습니다 3. 일반적으로 프로젝트에서 더 자주 사용되는 페이지는 양식을 로드하는 페이지입니다. 예를 들어 추가와 편집이 동일한 목록 페이지에 있을 때 다음과 같이 추가와 편집을 모두 두꺼운 상자 형태로 만들 수 있습니다. 아래에 표시됩니다:

방법은 동일합니다. 추가된 링크에 두꺼운 상자 스타일을 추가하세요.

추가

표시하려는 페이지(add.shtml)를 준비한 다음 표시할 크기를 지정해야 한다는 전제가 있습니다

편집도 마찬가지입니다. 먼저 원본 정보를 추출한 다음 사용자가 수정하도록 하세요.

동일 코드:

코드 복사 코드는 다음과 같습니다.

편집

4. Thickbox가 필요한 요소를 직접 찾을 수 있으며, 스타일을 사용하는 대신 다음과 같은 기능을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(함수() { tb_init("#PicList a[img]");});

5. Ajax를 통해 로드된 페이지의 경우 두꺼운 상자 스타일이 유효하지 않습니다. 해결 방법:
AJAX가 HTML을 로드하고 페이지에 업데이트한 후 다음 코드를 실행하세요.

tb_init('.thickbox');
6. 사용자 정의 함수 호출:
큰 이미지를 표시하기 위해 썸네일을 클릭하면 썸네일 URL은 큰 이미지 URL의 접미사 앞에 s:

를 추가합니다.

코드 복사 코드는 다음과 같습니다.

$(함수() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

또한, 다른 이벤트를 사용하고 싶다면 클릭을 Thickbox를 트리거하려는 이벤트로 변경할 수도 있습니다.

THICKBOX는 다음 브라우저를 지원합니다:
Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... 하지만 제 경험에 따르면 IE6에는 여전히 문제가 있습니다!