jQuery顶部弹出提示js代码

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

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

以下是 jQuery顶部弹出提示js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>jQuery顶部弹出提示</title>
<meta name="description" content>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css?v=22">
<link rel="stylesheet" href="css/envato_referral.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/shCore.css" />
<link type="text/css" rel="stylesheet" href="css/shThemeDefault.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script src="js/modernizr-1.7.min.js"></script>
<script src="js/envato_referral.js"></script>
</head>
<body>
<div id="container">
	<div class="main">
		<link href="css/banner-message.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript" src="js/banner-message-min.js"></script>
		<script type="text/javascript">
function showMessage(color) {
jQuery().showRibbonMessage({
color: color,
message : "Here is the same message, but in " + color + " color"
});				
}
</script>
		<style type="text/css">
.testbuttons { margin-right: 20px; }
</style>
		<h1>jQuery Banner Message</h1>
		<h2>Try Demo</h2>
		<a href onclick="showMessage('default'); return false;" class="testbuttons">
		<img src="img/default.png" />
		</a>
		<a href onclick="showMessage('green'); return false;" class="testbuttons">
		<img src="img/positive.png" />
		</a>
		<a href onclick="showMessage('blue'); return false;" class="testbuttons">
		<img src="img/cool.png" />
		</a>
		<a href onclick="showMessage('pink'); return false;" class="testbuttons">
		<img src="img/funky.png" />
		</a></div>
</div>
</body>
</html>

JS代码(shBrushJScript.js):

/** * SyntaxHighlighter * http://alexgorbatchev.com/ * * SyntaxHighlighter is donationware. If you are using it,please donate. * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate * * @version * 2.0.320 (May 03 2009) * * @copyright * Copyright (C) 2004-2009 Alex Gorbatchev. * * @license * This file is part of SyntaxHighlighter. * * SyntaxHighlighter is free software:you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation,either version 3 of the License,or * (at your option) any later version. * * SyntaxHighlighter is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY;
	without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with SyntaxHighlighter. If not,see <http://www.gnu.org/copyleft/lesser.html>. */
SyntaxHighlighter.brushes.JScript = function(){
	var keywords ='break case catch continue ' +'default delete do else false ' +'for function if in instanceof ' +'new null return super switch ' +'this throw true try typeof var while with';
	this.regexList = [{
	regex:SyntaxHighlighter.regexLib.singleLineCComments,css:'comments'}
,// one line comments{
	regex:SyntaxHighlighter.regexLib.multiLineCComments,css:'comments'}
,// multiline comments{
	regex:SyntaxHighlighter.regexLib.doubleQuotedString,css:'string'}
,// double quoted strings{
	regex:SyntaxHighlighter.regexLib.singleQuotedString,css:'string'}
,// single quoted strings{
	regex:/\s*#.*/
gm,css:'preprocessor'}
,// preprocessor tags like #region and #endregion{
	regex:new RegExp(this.getKeywords(keywords),'gm'),css:'keyword'}
// keywords];
	this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
}
;
	SyntaxHighlighter.brushes.JScript.prototype= new SyntaxHighlighter.Highlighter();
	SyntaxHighlighter.brushes.JScript.aliases= ['js','jscript','javascript'];

CSS代码(style.css):

/* HTML5 ✰ Boilerplate */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,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;}
em{font-style:italic;font-weight:bold;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
body{font:13px/1.231 sans-serif;*font-size:small;}
pre,code,kbd,samp{font-family:monospace,sans-serif;}
html{overflow-y:scroll;}
a:hover,a:active{outline:none;}
ul,ol{margin-left:2em;}
ol{list-style-type:decimal;}
nav ul,nav li{margin:0;list-style:none;list-style-image:none;}
small{font-size:85%;}
strong,th{font-weight:bold;}
td{vertical-align:top;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;padding:15px;}
textarea{overflow:auto;}
.ie6 legend,.ie7 legend{margin-left:-7px;}
input[type="radio"]{vertical-align:text-bottom;}
input[type="checkbox"]{vertical-align:bottom;}
.ie7 input[type="checkbox"]{vertical-align:baseline;}
.ie6 input{vertical-align:text-bottom;}
label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer;}
button,input,select,textarea{margin:0;}
input:valid,textarea:valid{}
input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red;}
.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd;}
::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none;}
::selection{background:#FF5E99;color:#fff;text-shadow:none;}
a:link{-webkit-tap-highlight-color:#FF5E99;}
body,select,input,textarea{color:#444;}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
/* START OF MAIN CSS */
@font-face{font-family:'LeagueGothicRegular';src:url('http://vc.stillbrandworks.com/fonts/League_Gothic-webfont.eot');src:url('http://vc.stillbrandworks.com/fonts/League_Gothic-webfont.eot?iefix') format('eot'),url('http://vc.stillbrandworks.com/fonts/League_Gothic-webfont.woff') format('woff'),url('http://vc.stillbrandworks.com/fonts/League_Gothic-webfont.ttf') format('truetype'),url('http://vc.stillbrandworks.com/fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');font-weight:normal;font-style:normal;}
body{background-color:#fff;font-family:arial,sans-serif;font-size:14pt;}
h1,h2,h3{font-family:arial,sans-serif;font-size:20pt;font-family:LeagueGothicRegular,arial;font-weight:normal;}
a,a:active,a:visited{text-decoration:none;}
button{padding:3px 3px;border:none;background:#52bdec;color:#fff;font-size:10pt;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
button:hover{background-color:#FF5E99;}
/* NAVIGATION */
#sidebar{padding-left:75px;left:20px;width:170px;position:fixed;padding-bottom:5px;padding-top:23px;background:url(../img/logo.png) no-repeat 0px 23px;}
#sidebar h2{color:#000;}
#sidebar .topnav li{padding:0px 5px 5px 0px;}
#sidebar .topnav a{border-bottom:1px dotted #c0c0c0;padding-bottom:5px;display:inline-block;font-family:LeagueGothicRegular,arial;font-weight:normal;font-size:18pt;}
#sidebar .subnav{margin:0px;font-size:12pt;margin-top:5px;}
#sidebar .subnav li{padding:5px 0px;display:block;}
#sidebar .subnav a{color:#636363;paddin-bottom:2px;font-size:13pt;}
#sidebar .subnav a:hover{color:#FF5E99;}
/* CODE */
.main pre{font-size:11pt;}
/* MAIN */
.main{margin:0 0 100px 280px;width:744px;padding-top:23px;color:#000;font-size:10pt;font-family:Georgia,arial,sans-serif;}
.main h1{font-size:28pt;color:#000;padding-bottom:20px;}
.main h2{padding:20px 0;font-size:15pt;}
.main p{padding-bottom:20px;}
.main ul{padding 0;margin:0;}
.main li{list-style:inside square;}
.appstoreicon{margin-top:30px;}
/* IE6 */
.ie6 #sidebar{margin-left:25px;float:left;}
.ie6 #sidebar .topnav a{border-bottom:1px solid #c0c0c0;}
.ie6 a.logo{float:left;}
#author{width:744px;background:#f2f2f2;}
#author img{display:inline;}
/* END OF MAIN CSS */
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
.hidden{display:none;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.ie6 .clearfix{clear:both;}
@media screen and (max-device-width:480px){/* html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
*/
}

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