jQuery轻量级响应式弹窗VenoBox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery轻量级响应式弹窗VenoBox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery��������Ӧʽ����VenoBox</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="venobox/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="venobox/demo.css" type="text/css" media="screen" />
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>
</head>
	<body>
	<div class="wrapper">
		<div class="block">
		<h2>Examples</h2>
		<p>Image gallery (possibility of navigation with keyboard arrows)</p>
			<ul class="thumbs">
				<li>
					<a id="firstlink" class="venobox" data-gall="gall1" title="Breakfast Recipe" href="img/25f7bf38a36413a35c1a1f1bf9363f76.png"><img src="img/pic1.jpg"></a>
				</li>
				<li>
					<a class="venobox" data-gall="gall1" title="Twhater" href="img/dcc6e8ecad425c0caf94466e41535ef5.png"><img src="img/pic2.jpg"></a>
				</li>
				<li>
					<a class="venobox" data-gall="gall1" href="img/52db37cfb4daafedb9909bf7cda59de8.jpg"><img src="img/pic3.jpg"></a>
				</li>
				<li>
					<a class="venobox" data-gall="gall1" href="img/64628d508ea9b5de1ea0f2ff9066419c.jpg"><img src="img/pic4.jpg"></a>
				</li>
			</ul>
		</div>

		<div class="block">
			<p>Various links</p>
			<a class="btn btn-default venoboxframe" data-type="iframe" title="veno.it" href="http://www.veno.it">iFrame</a>
			<a data-gall="gall2" data-type="iframe" class="btn btn-primary venoboxframe" href="https://maps.google.it/maps?oe=utf-8&amp;client=firefox-a&amp;ie=UTF8&amp;q=Monkey+surf+club+Riccione&amp;fb=1&amp;gl=it&amp;hq=monkey+surf&amp;hnear=0x132cc3a48fa6592b:0xc1f284db17f1449d,Rimini&amp;cid=0,0,1254770793035831807&amp;t=m&amp;vpsrc=0&amp;iwloc=A&amp;ll=44.007971,12.656561&amp;spn=0.006295,0.006295&amp;output=embed">G maps</a>
			<a class="btn btn-info venoboxvid" data-gall="gall2" data-type="vimeo" href="http://vimeo.com/75976293">Vimeo</a>
			<a class="btn btn-danger venoboxvid" data-gall="gall2" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">YouTube</a>
			<a class="btn btn-warning venoboxajax" data-gall="gall3" data-type="ajax" href="ajax.php">Ajax</a>
			<a class="btn btn-warning venoboxinline" data-gall="gall3" data-type="inline" href="#inline-content">Inline</a>
		</div>

		<div id="inline-content" style="display:none;">
			<div style="background:#fff; width:100%; height:100%; float:left; padding:10px;">
			<h1>Hello world!</h1>
			<p>this is my inline content</p>
			</div>
		</div>




</div> <!-- wrapper -->
	<script type="text/javascript">
		 $(document).ready(function(){
			$('.venobox').venobox({
				numeratio: true,
				border: '20px'
			});
			$('.venoboxvid').venobox({
				bgcolor: '#000'
			});
			$('.venoboxframe').venobox({
				border: '6px'
			});
			$('.venoboxinline').venobox({
				framewidth: '300px',
				frameheight: '250px',
				border: '6px',
				bgcolor: '#f46f00'
			});
			$('.venoboxajax').venobox({
				border: '30px;',
				frameheight: '220px'
			});
		})
	</script>
	</body>
</html>

JS代码(jquery-migrate-1.2.1.min.js):

/*! jQuery Migrate v1.2.1 | (c) 2005,2013 jQuery Foundation,Inc. and other contributors | jquery.org/license */
jQuery.migrateMute===void 0&&(jQuery.migrateMute=!0),function(e,t,n){
	function r(n){
	var r=t.console;
	i[n]||(i[n]=!0,e.migrateWarnings.push(n),r&&r.warn&&!e.migrateMute&&(r.warn("JQMIGRATE:"+n),e.migrateTrace&&r.trace&&r.trace()))}
function a(t,a,i,o){
	if(Object.defineProperty)try{
	return Object.defineProperty(t,a,{
	configurable:!0,enumerable:!0,get:function(){
	return r(o),i}
,set:function(e){
	r(o),i=e}
}
),n}
catch(s){
}
e._definePropertyBroken=!0,t[a]=i}
var i={
}
;
	e.migrateWarnings=[],!e.migrateMute&&t.console&&t.console.log&&t.console.log("JQMIGRATE:Logging is active"),e.migrateTrace===n&&(e.migrateTrace=!0),e.migrateReset=function(){
	i={
}
,e.migrateWarnings.length=0}
,"BackCompat"===document.compatMode&&r("jQuery is not compatible with Quirks Mode");
	var o=e("<input/>",{
	size:1}
).attr("size")&&e.attrFn,s=e.attr,u=e.attrHooks.value&&e.attrHooks.value.get||function(){
	return null}
,c=e.attrHooks.value&&e.attrHooks.value.set||function(){
	return n}
,l=/^(?:input|button)$/i,d=/^[238]$/,p=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,f=/^(?:checked|selected)$/i;
	a(e,"attrFn",o||{
}
,"jQuery.attrFn is deprecated"),e.attr=function(t,a,i,u){
	var c=a.toLowerCase(),g=t&&t.nodeType;
	return u&&(4>s.length&&r("jQuery.fn.attr( props,pass ) is deprecated"),t&&!d.test(g)&&(o?a in o:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can't change the 'type' of an input or button in IE 6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={
	get:function(t,r){
	var a,i=e.prop(t,r);
	return i===!0||"boolean"!=typeof i&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n}
,set:function(t,n,r){
	var a;
	return n===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,a in t&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}
}
,f.test(c)&&r("jQuery.fn.attr('"+c+"') may use property instead of attribute")),s.call(e,t,a,i))}
,e.attrHooks.value={
	get:function(e,t){
	var n=(e.nodeName||"").toLowerCase();
	return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value') no longer gets properties"),t in e?e.value:null)}
,set:function(e,t){
	var a=(e.nodeName||"").toLowerCase();
	return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value',val) no longer sets properties"),e.value=t,n)}
}
;
	var g,h,v=e.fn.init,m=e.parseJSON,y=/^([^<]*)(<[\w\W]+>)([^>]*)$/;
	e.fn.init=function(t,n,a){
	var i;
	return t&&"string"==typeof t&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("<"!==t.charAt(0)&&r("$(html) HTML strings must start with '<' character"),i[3]&&r("$(html) HTML text after last tag is ignored"),"#"===i[0].charAt(0)&&(r("HTML string cannot start with a '#' character"),e.error("JQMIGRATE:Invalid selector string (XSS)")),n&&n.context&&(n=n.context),e.parseHTML)?v.call(this,e.parseHTML(i[2],n,!0),n,a):v.apply(this,arguments)}
,e.fn.init.prototype=e.fn,e.parseJSON=function(e){
	return e||null===e?m.apply(this,arguments):(r("jQuery.parseJSON requires a valid JSON string"),null)}
,e.uaMatch=function(e){
	e=e.toLowerCase();
	var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||0>e.indexOf("compatible")&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];
	return{
	browser:t[1]||"",version:t[2]||"0"}
}
,e.browser||(g=e.uaMatch(navigator.userAgent),h={
}
,g.browser&&(h[g.browser]=!0,h.version=g.version),h.chrome?h.webkit=!0:h.webkit&&(h.safari=!0),e.browser=h),a(e,"browser",e.browser,"jQuery.browser is deprecated"),e.sub=function(){
	function t(e,n){
	return new t.fn.init(e,n)}
e.extend(!0,t,this),t.superclass=this,t.fn=t.prototype=this(),t.fn.constructor=t,t.sub=this.sub,t.fn.init=function(r,a){
	return a&&a instanceof e&&!(a instanceof t)&&(a=t(a)),e.fn.init.call(this,r,a,n)}
,t.fn.init.prototype=t.fn;
	var n=t(document);
	return r("jQuery.sub() is deprecated"),t}
,e.ajaxSetup({
	converters:{
	"text json":e.parseJSON}
}
);
	var b=e.fn.data;
	e.fn.data=function(t){
	var a,i,o=this[0];
	return!o||"events"!==t||1!==arguments.length||(a=e.data(o,t),i=e._data(o,t),a!==n&&a!==i||i===n)?b.apply(this,arguments):(r("Use of jQuery.fn.data('events') is deprecated"),i)}
;
	var j=/\/(java|ecma)script/i,w=e.fn.andSelf||e.fn.addBack;
	e.fn.andSelf=function(){
	return r("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)}
,e.clean||(e.clean=function(t,a,i,o){
	a=a||document,a=!a.nodeType&&a[0]||a,a=a.ownerDocument||a,r("jQuery.clean() is deprecated");
	var s,u,c,l,d=[];
	if(e.merge(d,e.buildFragment(t,a).childNodes),i)for(c=function(e){
	return!e.type||j.test(e.type)?o?o.push(e.parentNode?e.parentNode.removeChild(e):e):i.appendChild(e):n}
,s=0;
	null!=(u=d[s]);
	s++)e.nodeName(u,"script")&&c(u)||(i.appendChild(u),u.getElementsByTagName!==n&&(l=e.grep(e.merge([],u.getElementsByTagName("script")),c),d.splice.apply(d,[s+1,0].concat(l)),s+=l.length));
	return d}
);
	var Q=e.event.add,x=e.event.remove,k=e.event.trigger,N=e.fn.toggle,T=e.fn.live,M=e.fn.die,S="ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",C=RegExp("\\b(?:"+S+")\\b"),H=/(?:^|\s)hover(\.\S+|)\b/,A=function(t){
	return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated,use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))}
;
	e.event.props&&"attrChange"!==e.event.props[0]&&e.event.props.unshift("attrChange","attrName","relatedNode","srcElement"),e.event.dispatch&&a(e.event,"handle",e.event.dispatch,"jQuery.event.handle is undocumented and deprecated"),e.event.add=function(e,t,n,a,i){
	e!==document&&C.test(t)&&r("AJAX events should be attached to document:"+t),Q.call(this,e,A(t||""),n,a,i)}
,e.event.remove=function(e,t,n,r,a){
	x.call(this,e,A(t)||"",n,r,a)}
,e.fn.error=function(){
	var e=Array.prototype.slice.call(arguments,0);
	return r("jQuery.fn.error() is deprecated"),e.splice(0,0,"error"),arguments.length?this.bind.apply(this,e):(this.triggerHandler.apply(this,e),this)}
,e.fn.toggle=function(t,n){
	if(!e.isFunction(t)||!e.isFunction(n))return N.apply(this,arguments);
	r("jQuery.fn.toggle(handler,handler...) is deprecated");
	var a=arguments,i=t.guid||e.guid++,o=0,s=function(n){
	var r=(e._data(this,"lastToggle"+t.guid)||0)%o;
	return e._data(this,"lastToggle"+t.guid,r+1),n.preventDefault(),a[r].apply(this,arguments)||!1}
;
	for(s.guid=i;
	a.length>o;
	)a[o++].guid=i;
	return this.click(s)}
,e.fn.live=function(t,n,a){
	return r("jQuery.fn.live() is deprecated"),T?T.apply(this,arguments):(e(this.context).on(t,this.selector,n,a),this)}
,e.fn.die=function(t,n){
	return r("jQuery.fn.die() is deprecated"),M?M.apply(this,arguments):(e(this.context).off(t,this.selector||"**",n),this)}
,e.event.trigger=function(e,t,n,a){
	return n||C.test(e)||r("Global events are undocumented and deprecated"),k.call(this,e,t,n||document,a)}
,e.each(S.split("|"),function(t,n){
	e.event.special[n]={
	setup:function(){
	var t=this;
	return t!==document&&(e.event.add(document,n+"."+e.guid,function(){
	e.event.trigger(n,null,t,!0)}
),e._data(this,n,e.guid++)),!1}
,teardown:function(){
	return this!==document&&e.event.remove(document,n+"."+e._data(this,n)),!1}
}
}
)}
(jQuery,window);

CSS代码(venobox.css):

/* ------ venobox.css --------*/
.vbox-overlay *,.vbox-overlay *:before,.vbox-overlay *:after{-webkit-backface-visibility:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{-webkit-overflow-scrolling:touch;}
/* ------- overlay:change here background color and opacity ----- */
.vbox-overlay{background:rgba(0,0,0,0.85);width:100%;height:auto;position:absolute;top:0;left:0;z-index:999;overflow:hidden;opacity:0;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out;}
.relativo{float:left;width:100%;height:100%;display:block;position:relative;}
/* ----- preloader ----- */
.vbox-preloader{position:fixed;width:36px;height:36px;left:50%;top:50%;margin-left:-18px;margin-top:-18px;background:url(preload.gif) center center no-repeat;text-indent:-100px;overflow:hidden;}
/* ----- navigation ----- */
.vbox-close{cursor:pointer;position:fixed;top:-1px;right:0;width:46px;height:40px;padding:10px 20px 10px 0;display:block;background:url(close.gif) no-repeat #161617;background-position:10px center;color:#fff;text-indent:-100px;overflow:hidden;}
.vbox-next,.vbox-prev{cursor:pointer;position:fixed;top:50%;color:#fff;width:30px;height:30px;margin-top:-15px;text-indent:-100px;overflow:hidden;}
.vbox-prev{left:10px;background:url(prev.gif) center center no-repeat;}
.vbox-next{right:10px;background:url(next.gif) center center no-repeat;}
.vbox-title{width:100%;height:40px;float:left;text-align:center;line-height:28px;font-size:12px;color:#fff;padding:6px 40px;overflow:hidden;background:#161617;position:fixed;display:none;top:-1px;left:0;}
.vbox-num{cursor:pointer;position:fixed;top:-1px;left:0;height:40px;display:block;color:#fff;overflow:hidden;line-height:28px;font-size:12px;padding:6px 10px;background:#161617;display:none;}
/* ------- inline window ------ */
.vbox-inline{width:420px;height:315px;padding:10px;background:#fff;text-align:left;margin:0 auto;overflow:scroll;}
/* ------- Video & iFrames window ------ */
.venoframe{border:none;width:960px;height:720px;overflow:scroll;}
@media (max-width:992px){.venoframe{width:640px;height:480px;}
}
@media (max-width:767px){.venoframe{width:420px;height:315px;}
}
@media (max-width:460px){.vbox-inline{width:100%;}
.venoframe{width:100%;height:260px;}
}
/* ------- PLease do NOT edit this! (or do it at your own risk) ------ */
.vbox-container{position:relative;background:#000;width:98%;max-width:1024px;margin:0 auto;}
.vbox-content{text-align:center;float:left;width:100%;position:relative;overflow:hidden;}
.vbox-container img{max-width:100%;height:auto;}
.vwrap{opacity:1;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out;width:100%;float:left;position:relative;margin:0;padding:0;left:0;height:auto;overflow:hidden;z-index:1;}

附件:下载该文件资源,减少时间成本(增值服务)