팝업 레이어 1: JQuery.Boxy (1) use_jquery 소개-JS 튜토리얼-php.cn

팝업 레이어 1: JQuery.Boxy (1) use_jquery 소개

WBOY

풀어 주다： 2016-05-16 18:01:09

원래의

1132명이 탐색했습니다.

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. 해당 페이지를 참고한 플러그인 

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

3.1. 팝업됩니다

a 태그의 제목이 설정되지 않은 경우 팝업 상자에는 제목이 없으며 href 뒤의 앵커 표시 m1은 표시되는 해당 요소 ID입니다. 없음으로 설정된 경우 요소 기본값은 팝업에서 표시를 설정합니다.

저자별 최신 기사