jBox 2.3은 jquery를 기반으로 한 최신 다기능 대화 상자 플러그인입니다.

플러그인 설명
- jBox는 jQuery를 기반으로 한 다기능 대화 플러그인으로 웹사이트의 전체적인 스타일 효과를 구현하고 사용자에게 새로운 시각적 즐거움을 선사합니다.
운영 환경
- IE6, Firefox, Chrome, Safari, Opera 및 기타 주요 브라우저와 호환됩니다.
사용 라이센스
- jBox는 영원히 무료로 사용할 수 있지만, 관련 저작권 정보는 유지되어야 합니다. 좋은 제안이 있으시면 바로 아래에 메시지를 남겨주세요.

버전: 2.3
크기: 19.8k
다운로드: 다운로드하려면 클릭
온라인 데모: http://www.kudystudio.com/jbox / jbox-demo.html
[2011-11-08] jBox v2.3 베타 버전 업데이트

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

- [New] Tip 메소드에 격리 레이어 표시 여부를 결정하는 불투명도 옵션이 추가되었습니다.
- [New] jBox 창을 표시할 때 브라우저의 스크롤 막대를 숨기는 showScrolling 옵션을 추가했습니다.
- [New] 여러 창이 공존하는 경우 창 제목을 클릭하면 해당 창이 자동으로 맨 위에 표시됩니다.
- [조정] id 옵션이 기본적으로 null로 변경됩니다. null일 경우 임의의 ID가 자동으로 생성되며, 각 ID에 하나의 jBox만 표시됩니다.
- [조정] 로드된 옵션은 h 매개변수를 추가합니다. 매개변수 h는 윈도우 콘텐츠의 jQuery 객체를 나타내며, 이는 윈도우가 로드된 후 사용자가 콘텐츠를 초기화하는 데 편리합니다.
- [조정] 전역 설정을 독립적인 js 파일에 넣고 i18n 디렉터리에 넣습니다. 현재는 jquery.jBox-zh-CN.js만 있습니다.
- [조정] 스페이스 바를 누르면 기본 버튼으로 제출된 이벤트를 바로 실행할 수 있습니다. (이 기능을 유지하려면 버튼에 초점을 맞추면 모양이 좋지 않으나 사용자 경험이 우선되어야 합니다.)
- [Fix] IE에서 여러 창 사이를 전환할 때 다중 창 상태가 표시되지 않는 버그를 수정했습니다.

사용법:

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

일반적인 사용 문제:
1 . XHTML 1.0 표준

2. 제목을 표시하고 싶지 않으신가요?
제목을 null로 설정합니다. 예: jBox('content', { title: null })
3. 맞춤 버튼?
버튼을 표시하지 않으려면 버튼을 {}로 설정하세요. 예: jBox('content', { 버튼: {} })
사용자 정의 버튼: jBox('content', { 버튼: {'Button 1 ' :'버튼 1 클릭 반환 값','버튼 2':'버튼 2 클릭 반환 값'} })
기본 버튼으로 설정할 버튼에 초점을 맞출 수도 있으며, 인덱스는 0부터 시작됩니다.
4. 격리 레이어 표시 안 함?
불투명도를 0으로 설정합니다. 예: jBox('content', { opacity: 0 })
5. 창이 자동으로 닫히나요?
자동으로 닫히지 않음을 나타내려면 시간 초과를 0으로 설정합니다. 양수는 자동으로 닫히는 데 걸리는 시간을 밀리초로 나타냅니다. 예를 들어, jBox('content', { timeout: 3000). });6. 격리 표시 안 함 레이어의 경우 버튼을 클릭할 때 동일한 창이 여러 개 표시되는 것을 방지하고 싶으십니까?
ID는 하나의 창만 표시하므로 ID만 전달하세요. 예: jBox('content', { id: 'my-id'})
7. 확실합니다. 값을 지정하시겠습니까? 적응 가능할까요?
iframe 외에도 다른 경우에는 창의 높이와 너비가 적응형이 되도록 지정할 수 있습니다. 예: jBox('content', { width: 'auto', height:'auto' });
jbox 선택적인 매개변수가 많이 있습니다. 다양한 매개변수를 결합하면 다른 효과를 얻을 수 있습니다. 아래의 전역 매개변수 설명을 확인하세요(jquery.jBox-zh-CN.js 파일). 중국어 간체를 사용하고 전역 구성을 변경하지 않으려면 jquery.jBox-2.3.min.js의 기본 설정이 다음과 동일하므로 jquery.jBox-zh-CN.js를 로드할 필요가 없습니다. jquery.jBox-zh-CN.js도 동일합니다. 창 테두리와 같은 특정 옵션만 수정하려면 jBox.setDefaults({ defaults: { border: 8} }) 한 줄의 코드만 있으면 됩니다.
jBox를 좋아하는 친구들, 잊지마세요 [추천]클릭 아, 3q

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

/* jBox 전역 설정*/
var jBoxConfig = {};
jBoxConfig.defaults = {
id: null, /* null인 경우 페이지의 고유 ID 그런 다음 임의의 ID를 자동으로 생성합니다. 하나의 ID는 하나의 jBox만 표시합니다. */
top: '15%', /* 상단에서 창까지의 거리, 백분율 또는 픽셀일 수 있음(예: '100px' ) */
border: 5, /* 창 외부 테두리의 픽셀 크기는 0 이상의 정수여야 합니다*/
opacity: 0.1, /* 창 격리 레이어의 투명도입니다. 0이면 격리 레이어가 표시되지 않습니다*/
timeout : 0, /* 자동으로 닫히기 전에 창이 몇 밀리초 동안 표시됩니까? 0으로 설정하면 자동으로 닫히지 않습니다*/
showType: 'fade ', /* 선택 값은 show, fade, Slide */
showSpeed: 'fast', /* 선택 값은 'slow', 'fast' 및 밀리초를 나타내는 정수. */
showIcon: true, /* 창 제목을 표시할지 여부, 표시하려면 true, 표시하지 않으려면 false 또는 사용자 정의 CSS 스타일 클래스 이름(아이콘 사용) 배경으로) */
showClose: true, /* 창 오른쪽 상단에 닫기 버튼을 표시할지 여부*/
draggable: true, /* 창을 끌 수 있는지 여부*/
dragLimit: true, /* 창을 드래그할 수 있는 경우 가시 범위로 제한할지 여부*/
dragClone: ​​​​false, /* 창을 드래그할 수 있는 경우 창의 경우 가시 범위로 제한할지 여부 마우스를 눌렀을 때 창 복제 */
persist: true, /* 격리 레이어가 표시될 때 격리 레이어를 클릭할 때 창이 닫히지 않도록 유지할지 여부 */
showScrolling: true , /* 탐색 스크롤 막대를 표시할지 여부*/
ajaxData: {}, /* 창 콘텐츠가 get: 또는 post: 접두사로 식별되는 경우 ajax 게시물의 데이터(예: { id: 1 } 또는 " id=1" */
iframeScrolling: 'auto', /* 창 콘텐츠가 iframe: 접두사로 식별되는 경우 iframe의 스크롤 속성 값은 'auto'입니다. , 'yes', 'no' */
title: 'jBox', /* 창 제목*/
width: 350, /* 창 너비, 값은 'auto' 또는 픽셀을 나타내는 정수*/
height: ' auto', /* 창의 높이, 값은 'auto' 또는 픽셀을 나타내는 정수*/
bottomText: '', /* 창의 내용 창 버튼 왼쪽, 버튼이 없으면 이 설정은 유효하지 않습니다*/
버튼: { 'OK': 'ok' }, /* 창 버튼*/
buttonsFocus: 0, / * 어떤 버튼이 기본 버튼인지 나타내며, 인덱스는 0부터 시작합니다*/
loaded: function ( h) { }, /* 윈도우가 로드된 후 실행되는 함수 ajax 또는 iframe인 경우에 주의해야 합니다. , http 요청이 로드될 때까지 창 로드가 완료되지 않습니다. 매개변수 h는 창 콘텐츠의 jQuery 개체를 나타냅니다.*/
submit: function (v, h, f) { return true }, /* 창 버튼을 클릭한 후 콜백 함수 true를 반환하면 창을 닫는다는 의미입니다. v는 클릭한 버튼의 반환 값을 의미하고, h는 창 내용의 jQuery 객체를 의미하며, f는 창의 양식 키 값을 나타냅니다. content*/
closed: function () { } /* 창이 닫힌 후 실행되는 함수*/
}
jBoxConfig.stateDefaults = {
content: '', /* 상태 콘텐츠, 접두사 식별은 지원되지 않습니다*/
buttons: { 'OK': 'ok' }, /* 상태 버튼*/
buttonsFocus: 0, /* 어떤 버튼이 기본 버튼인지 나타내며 인덱스는 0*/
submit: function (v, h, f) { return true } /* 상태 버튼을 클릭한 후 true를 반환하는 콜백 함수는 창이 닫혔다는 것을 의미합니다. 창에는 세 개의 매개변수가 있으며, v는 반환 값을 나타냅니다. 버튼을 클릭하면 h는 창 콘텐츠의 jQuery 객체를 나타내고, f는 창 콘텐츠의 양식 키 값을 나타냅니다.*/
}
jBoxConfig.tipDefaults = {
content: '', /* Prompt 콘텐츠, 접두사 식별은 지원되지 않습니다*/
아이콘: '정보', /* 프롬프트 아이콘, 선택 값은 '정보', '성공', '경고', '오류', '로딩', 기본값은 'info'이며, 'loading'일 때 시간 초과 값은 0으로 설정되어 자동으로 닫히지 않음을 나타냅니다.*/
top: '40%', /* 프롬프트 상단으로부터의 거리(백분율 또는 픽셀일 수 있음(예: '100px')) */
width: 'auto', /* 프롬프트의 높이, 값은 'auto' 또는 픽셀을 나타내는 정수*/
height: 'auto', /* 프롬프트의 높이, 값은 'auto' 또는 픽셀을 나타내는 정수*/
opacity: 0, /* 창 격리 레이어의 높이 투명도, 0으로 설정하면 격리 레이어가 표시되지 않습니다*/
timeout: 3000, /* 프롬프트가 표시되는 데 몇 밀리초가 걸릴까요? 표시된 후 자동으로 닫힙니다. 0보다 큰 정수여야 합니다.*/
loaded: function (h) { } /* 창이 로드된 후 실행되는 함수 h 매개변수는 창 콘텐츠의 jQuery 개체를 나타냅니다.* /
};
jBoxConfig.messagerDefaults = {
content: '', /* 메시지 내용, 접두사는 지원되지 않습니다. Identity*/
title: 'jBox', /* 메시지 제목*/
icon: 'none', /* 값이 'none'인 경우 아이콘이 표시되지 않습니다. ', 'info', ' 질문', '성공', '경고', '오류' */
width: 350, /* 정보의 높이, 값은 'auto' 또는 픽셀을 나타내는 정수 */
height: ' auto', /* 정보의 높이, 값은 'auto' 또는 픽셀을 나타내는 정수입니다.*/
timeout: 3000, /* 정보가 표시된 후 몇 밀리초가 지나면 자동으로 닫힙니다. 0이면 자동으로 닫히지 않습니다*/
showType: 'slide', /* 정보 표시 유형, 선택 값은 show, fade, Slide */
showSpeed: 600, /* Speed ​​​​정보 표시 옵션 값은 'slow', 'fast', 밀리초를 나타내는 정수*/
border: 0, /* 메시지 외부 테두리의 픽셀 크기는 0보다 큰 정수여야 합니다* /
buttons: {}, /* 메시지의 픽셀 크기 Buttons*/
buttonsFocus: 0, /* 어떤 버튼이 기본 버튼인지 나타내며 인덱스는 0부터 시작합니다*/
loaded: function () { }, /* 창이 로드된 후 실행되는 함수*/
submit: function (v, h, f) { return true }, /* 정보 버튼을 클릭한 후 콜백 함수가 반환됨을 의미합니다. 세 가지 매개변수가 있습니다. v는 클릭한 버튼의 반환 값을 나타내고, h는 창 내용을 나타내는 jQuery 객체, f는 창 내용의 양식 키 값을 나타냅니다.*/
loaded: function (h) { } /* 창이 로드된 후 실행되는 함수, 매개변수 h는 창 내용의 jQuery 객체를 나타냅니다.*/
jBoxConfig.언어Defaults = {
close: 'Close', /* 닫기 버튼 프롬프트 창의 오른쪽 상단*/
ok: 'OK', /* $.jBox.prompt() 시리즈 메소드의 "OK" 버튼 텍스트 */
yes: 'Yes', /* $.jBox.warning() 메소드의 "Yes" 버튼 텍스트 */
no: 'No', /* $.jBox.warning() 메소드의 "No" 버튼 텍스트*/
취소: '취소' /* $.jBox.confirm() 및 $.jBox.warning() 메소드에 대한 "취소" 버튼 텍스트*/
}
$.jBox.setDefaults(jBoxConfig)