팝업 레이어 1: JQuery.Boxy (1) use_jquery 소개
- WBOY원래의
- 2016-05-16 18:01:091093검색
1. 플러그인 다운로드 및 수정
공식 홈페이지(http://plugins.jquery.com/files/boxy-0.1.4)에서 최신 버전을 다운로드할 수 있습니다. zip), 나에게 가십시오. 이 단어를 작성할 때 최신 버전은 버전 0.1.4입니다. 다운로드하고 압축을 풀면 1개의 주요 js 파일이 있습니다: jquery.boxy.js 1개의 CSS 파일과 4개의 그림을 구성하는 데 사용됩니다. 팝업 레이어의 둥근 모서리. 파일을 시스템에 도입하고 boxy.css를 수정한 후 아래 이미지 경로를 프로젝트의 실제 위치로 변경합니다. 설정이 올바르지 않으면 이미지가 무효화되어 보기 흉해집니다.
코드 복사 코드는 다음과 같습니다.
/* 여기의 이미지를 상대적으로 수정합니다. to css 파일의 이미지 파일 경로*/
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png') }
.boxy- 래퍼 .top-right { 배경: url('../images/boxy-ne.png') }
.boxy-wrapper .bottom-right { 배경: url('../images/boxy-se) .png'); }
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png') }
/* 참고: 다음 경로가 있어야 합니다. 절대 경로 또는 URL 형식 +/ //www.xxx.com/xxx.png 나타남*/
.boxy-wrapper .top-left { #배경: 없음 #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/ boxy-nw.png') }
.boxy-wrapper .top-right { #배경: 없음; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ boxy-ne.png') }
.boxy-wrapper .bottom-right { #배경: 없음; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png') ; }
.boxy -wrapper .bottom-left { #배경: 없음; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png')
2. 해당 페이지를 참고한 플러그인
코드 복사 코드는 다음과 같습니다.
a 태그의 제목이 설정되지 않은 경우 팝업 상자에는 제목이 없으며 href 뒤의 앵커 표시 m1은 표시되는 해당 요소 ID입니다. 없음으로 설정된 경우 요소 기본값은 팝업에서 표시를 설정합니다.