jQuery右击logo弹出浮动窗口js代码

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

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

以下是 jQuery右击logo弹出浮动窗口js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery右击logo弹出浮动窗口</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="styles/style.css" />
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/modernizr.min.js"></script>
</head>

<body>
    <header role="banner" id="banner">
        <a href="#">
            <img src="images/oxp-logo.png" alt="Logo" id="logo" />
            <h1>Example Header</h1>
        </a>
        <nav role="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="content" role="main">
        <h1>
            鼠标右键点击LOGO图片<br />
            即可看到效果。
        </h1>
    </section>
    <script src="scripts/script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	$('#logo').bind('contextmenu',function(e){
	// check if right button is clickedif(e.button === 2){
	showPressModal();
	e.preventDefault();
}
}
);
	// when clicking on the shadow or on the close button$('#shadow,.close').live('click',function(){
	hidePressModal();
}
);
	// open links with rel="external" in a new window or tab$('a[rel="external"]').click( function(){
	window.open( $(this).attr('href') );
	return false;
}
);
}
);
	// the modal window htmlvar logos = '<h2>Looking for our Logo?<span class="close">X</span></h2>';
	logos += '<img src="images/oxp-logo.png" alt="Logo Download" />';
	logos += '<ul><li><a href="images/oxp-logo.png" rel="external">High Res<span>300 Kb</span></a></li>';
	logos += '<li><a href="images/oxp-logo.png" rel="external">Low Res<span>150 Kb</span></a></li></ul>';
	function showPressModal(){
	// if no shadow is visible then no modal is displayedif($('#shadow').length === 0){
	$('#banner').append('<div id="logo-modal"></div>');
	$('body').prepend('<div id="shadow"></div>');
	$('#logo-modal').hide();
	$('#shadow').hide();
	if(logos !== undefined){
	$('#logo-modal').append(logos);
	$('#shadow').fadeIn();
	$('#logo-modal').slideDown();
}
}
}
function hidePressModal(){
	$('#shadow').fadeOut(400,function(){
	$(this).remove();
}
);
	$('#logo-modal').slideUp(400,function(){
	$(this).remove();
}
);
}

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

body{font-family:'Helvetica Neue',Verdana,sans-serif;}
#shadow{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);z-index:10;}
#logo-modal{position:absolute;background:#FFFFFF;width:320px;padding:20px;top:0;z-index:20;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#logo-modal h2{color:#666666;line-height:20px;position:relative;}
#logo-modal h2 span{position:absolute;right:0;top:-2px;display:block;padding:0px 5px;background:#CC0000;cursor:pointer;color:#FFFFFF;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#logo-modal h2 span:hover{background:#FF0000;}
#logo-modal img{margin:10px 0;max-width:100%;}
#logo-modal ul{border-top:1px solid #CCCCCC;}
#logo-modal ul li{border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;}
#logo-modal ul li a{text-decoration:none;font-size:14px;color:#44c9aa;display:block;position:relative;padding:10px 20px;}
#logo-modal ul li a:hover{background:#EFEFEF;}
#logo-modal ul li a span{position:absolute;right:20px;color:#999999;font-size:12px;}
#banner{width:960px;margin:0 auto;height:150px;position:relative;}
#banner h1{position:absolute;text-indent:-9999em;}
#logo{float:left;padding-top:29px;}
#banner nav{float:right;width:50%;height:150px;}
#banner nav ul{list-style:none;display:block;}
#banner nav ul li{display:block;float:left;margin:55px 20px;height:40px;}
#banner nav ul li a{display:block;background:#FFFFFF;height:100%;line-height:40px;padding:0 20px;text-decoration:none;color:#44c9aa;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
#banner nav ul li a:hover{background:#EFEFEF;}
#content{width:960px;margin:0 auto;text-align:center;}
#content h1{font-size:40px;margin:1em 0;font-weight:bold;color:#666666;line-height:1.5em;}

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