jquery.artwl.thickbox.js 매우 간단하고 사용하기 쉬운 jQuery 팝업 레이어 플러그인

jquery.artwl.thickbox.js 매우 간단하고 사용하기 쉬운 jQuery 팝업 레이어 플러그인_jquery

WBOY

풀어 주다： 2016-05-16 17:55:36

원래의

1012명이 탐색했습니다.

最终效果：

复代码代码如下:

<머리>

弹 Out层插件:jquery.artwl.thickbox.js

<본문>

弹 Out层插件jquery.artwl.thickbox.js(http://www.jb51.net)

플러그인 원리
모든 팝업 레이어의 원리는 유사합니다. 즉, 전체 화면 반투명 DIV를 마스크 레이어로 사용한 다음 이 마스크 레이어 위에 레이어를 표시하여 콘텐츠가 표시되고 나머지는 CSS가 사용됩니다.
이 플러그인은 사용하기 간편하도록 JS와 CSS를 JS 파일(플러그인)에 캡슐화하여 사용하기 매우 편리하고 코드 한 줄로 호출할 수 있습니다.
플러그인 소스코드
플러그인 소스코드(jquery.artwl.thickbox.js)는 다음과 같습니다.

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

/* 파일 생성일: 2012년 3월 1일 작성자:artwl 블로그:http://artwl.cnblogs.com */
; (함수($) {
$.extend({
artwl_bind: 함수(옵션) {
options=$.extend({
showbtnid:"",
제목:"",
content:""
},options)
var 마스크 = '

'
var boxcontain = '

제목>

콘텐츠

'; h2, h3, h4, h5{여백: 0px;패딩: 0px;}
#artwl_mask{배경색: #000;위치: 절대;상단: 0px;왼쪽: 0px;너비: 100%;높이: 100 %;불투명도: 0.5;필터: 알파(불투명도=50);표시: 없음;}
#artwl_boxcontain{margin: 0 자동;위치: 절대;z-색인: 2;줄 높이: 28px;표시: 없음 ;}
#artwl_showbox{패딩: 10px;배경: #FFF;테두리 반경: 5px;여백: 20px;min-width:300px;min-height:200px;}
#artwl_title{위치: 상대; 높이: 27px;border-bottom: 1px solid #999;}
#artwl_close{위치: 절대; 커서: 포인터; 윤곽선: 없음; 상단: 0; 오른쪽: 0; z-색인: 4; 너비: 42px; 높이: 42px;오버플로우: 숨겨진;배경 -이미지: url(/Images/feedback-close.png);_배경: 없음;}
#artwl_message{패딩: 10px 0px;오버플로우: 숨겨진;줄 높이: 19px; }';
if ($ ("#artwl_mask").length == 0) {
$("body").append(mask boxcontain)
$("head").append( "")
if(options.title!=""){
$("#artwl_title").html (options.title);
}
if(options.content!=""){
$("#artwl_message").html(options.content)
}
}
$("#" options .showbtnid).click(function () {
var height = $("#artwl_boxcontain").height();
var width = $("#artwl_boxcontain") .width();
$ ("#artwl_mask").show();
$("#artwl_boxcontain").css("top", ($(window).height() - 높이) / 2).css("왼쪽", ($(window).width() - 너비) / 2).show()
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
width = $(window).width() > 600 : $(window).width() -
$("#artwl_boxcontain").css( "너비", 너비 "px") .css("top", ($(window).height() - 높이) / 2).css("왼쪽", ($(window).width() - 너비) / 2).show();
$("#artwl_mask").css("너비", $(window).width() "px").css("높이", $(window).height () "px").css( "배경", "#888")
$("#artwl_close").css("top", "30px").css("right", "30px" ).css("font-size" , "20px").text("닫기");
}
})
$("#artwl_close").click(function () {
$("#artwl_mask") .hide();
$("#artwl_boxcontain").hide()
})
},
artwl_close:function(options){
options=$.extend( {
콜백:null
},options)
$("#artwl_mask").hide()
$("#artwl_boxcontain"). hide();
if( options.callback!=null){
options.callback()
}
}); 🎜>

호출 이 JS 파일을 페이지에 도입한 후 페이지 로딩 메소드에서 다음 코드를 호출하면 됩니다.
$.artwl_bind({ showbtnid: "btn_show", title : "From Cnblogs Artwl", content: $(" #Content").html() })
이 세 가지 매개변수는 매우 간단합니다. 첫 번째는 이벤트를 트리거하는 팝업 레이어의 요소 ID입니다. 두 번째는 팝업 레이어의 제목이고, 세 번째는 팝업 레이어의 내용입니다.
Notes

이 플러그인은 사용 편의성을 위해 JS와 CSS를 하나의 파일에 작성합니다. 팝업 레이어의 스타일을 조정하려면 다음 CSS를 수정하면 됩니다.
플러그인 CSS 코드:

코드 복사

코드는 다음과 같습니다.

 
html, body, h1, h2, h3, h4, h5 { 
여백: 0px; 
패딩: 0px; 
} 
#artwl_mask { 
배경 - 색상: #000; 
위치: 절대; 
상단: 0px; 
왼쪽: 0px; 
너비: 100%; 
높이: 100%; 
불투명도: 0.5; 
필터: 알파(불투명도= 50); 
디스플레이: 없음; 
} 
#artwl_boxcontain { 
여백: 0 자동; 
위치: 절대; 
z - 인덱스: 2; 
라인 - 높이: 28px; 
디스플레이: 없음; 
} 
#artwl_showbox { 
패딩: 10px; 
배경: #FFF; 
테두리 - 반경: 5px; 
여백: 20px; 
최소 - 너비: 300px; 
최소 - 높이: 200px; 
} 
#artwl_title { 
위치: 상대; 
높이: 27px; 
테두리 - 하단: 1px 솔리드 #999; 
} 
# artwl_close { 
위치: 절대; 
커서: 포인터; 
개요: 없음; 
상단: 0; 
오른쪽: 0; 
z - 인덱스: 4; 
너비: 42px; 
높이: 42px; 
오버플로: 숨김; 
배경 - 이미지: url(/Images/feedback - close.png); 
_배경: 없음; 
} 
#artwl_message { 
패딩: 10px 0px; 
오버플로: 숨김; 
라인 - 높이: 19px; 
} 

另밖, 针对IE6不支持透明擧了特殊处理, 에서IE6下显示为:

IE6

其他浏览器

Demo下载地址：http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar