jQuery窗口顶部消息通知代码

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

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

以下是 jQuery窗口顶部消息通知代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery窗口顶部消息通知代码</title>
<link rel="stylesheet" type="text/css" href="demo/style/index.css" />
<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<link rel="stylesheet" type="text/css" href="demo/style/prism.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/overhang.js"></script>
<script type="text/javascript" src="demo/js/prism.js"></script>
<script type="text/javascript" src="demo/js/index.js"></script>

</head>
<body>

	<div class="aligned-box">
  <h1 class="title"><span class="pre">overhang</span>.js</h1>
  <p class="descrip">A JQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.</p>

  <button class="try-button sample">Try me</button>

  <div id="Examples">
	<div class="example--left">
	  <div class="code-info">
		<p class="type">Success Message</p>
		<button class="try-button example--1">Try me</button>
	  </div>
	  <div class="code-example">
<pre style="width: 290px"><code class="language-javascript">
$("body").overhang({
type: "success",
message: "Woohoo! It works!"
});
</code></pre>
	  </div>
	</div>

	<div class="example--right">
	  <div class="code-example">
<pre style="width: 370px"><code class="language-javascript">
$("body").overhang({
type: "error",
message: "Whoops! Something went wrong!",
closeConfirm: true
});
</code></pre>
	  </div>
	  <div class="code-info">
		<p class="type">Closable Message</p>
		<button class="try-button example--2">Try me</button>
	  </div>
	</div>

	<div class="example--left">
	  <div class="code-info">
		<p class="type">Timed Message</p>
		<button class="try-button example--3">Try me</button>
	  </div>
	  <div class="code-example">
<pre style="width: 350px"><code class="language-javascript">
$("body").overhang({
type: "info",
message: "This message will close in 5 seconds!",
duration: 5,
upper: true
});
</code></pre>
	  </div>
	</div>

	<div class="example--right">
	  <div class="code-example">
<pre style="width: 367px"><code class="language-javascript">
$("body").overhang({
type: "warn",
message: "A user has reported you!",
duration: 3
});
</code></pre>
	  </div>
	  <div class="code-info">
		<p class="type">Warning Message</p>
		<button class="try-button example--4">Try me</button>
	  </div>
	</div>

	<div class="example--left">
	  <div class="code-info">
		<p class="type">Prompt Alert</p>
		<button class="try-button example--5">Try me</button><br />
		<button class="try-button example--6">View</button>
	  </div>
	  <div class="code-example">
<pre style="width: 290px"><code class="language-javascript">
$("body").overhang({
type: "prompt",
message: "What's your name?"
});
</code></pre>
	  </div>
	</div>

	<div class="example--right">
	  <div class="code-example">
<pre style="width: 270px"><code class="language-javascript">
$("body").overhang({
type: "confirm",
message: "Are you sure?"
});
</code></pre>
	  </div>
	  <div class="code-info">
		<p class="type">Confirmation Alert</p>
		<button class="try-button example--7">Try me</button><br />
		<button class="try-button example--8">View</button>
	  </div>
	</div>

	<div class="example--left">
	  <div class="code-info">
		<p class="type">Customized Alert</p>
		<button class="try-button example--9">Try me</button>
	  </div>
	  <div class="code-example" style="margin-bottom: 30px;">
<pre style="width: 350px"><code class="language-javascript">
$("body").overhang({
custom: true,
textColor: "#FCE4EC",
primary: "#F06292",
accent: "#FCE4EC",
message: "This is my custom message 😜"
});
</code></pre>
	  </div>
	</div>

	<div class="example--right">
	  <div class="code-example">
<pre style="width: 350px"><code class="language-javascript">
$("body").overhang({
type: "confirm",
primary: "#40D47E",
accent: "#27AE60",
yesColor: "#3498DB",
message: "Do you want to continue?",
callback: function () {
var selection = $("body").data("overhangConfirm");
var response = selection ? "yes" : "no";
alert("You made your selection of " + response);
}
});
</code></pre>
	  </div>
	  <div class="code-info">
		<p class="type">Using callbacks</p>
		<button class="try-button example--10">Try me</button><br />
	  </div>
	</div>

	<div class="example--left">
	  <div class="code-info">
		<p class="type">Using HTML</p>
		<button class="try-button example--11">Try me</button>
	  </div>
	  <div class="code-example" style="margin-bottom: 30px;">
<pre style="width: 350px"><code class="language-javascript">
var snapchatIcon = '&lt;i class="fa fa-snapchat-ghost" style="color: #FFFC00" aria-hidden="true">&lt;/i>';
var snapchatNote = ' Add <span style="font-size: 20px">"thepaulkr"</span> on snapchat!';

$("body").overhang({
type: "confirm",
primary: "#333333",
accent: "#FFFC00",
message: snapchatIcon + snapchatNote,
custom: true,
html: true,
callback: function () {
var selection = $("body").data("overhangConfirm");
if (selection) {
  window.open("#/", "_blank");
} else {
  alert("Maybe next time then...");
}
}
});
</code></pre>
	  </div>
	</div>
	
  </div>
</div>
</body>
</html>

JS代码(index.js):

/** * index.js * Paul Krishnamurthy 2016 */
$(document).ready(function (){
	$(".sample").click(function (){
	$("body").overhang({
	type:"success"}
);
}
);
	$(".example--1").click(function (){
	$("body").overhang({
	type:"success",message:"Woohoo! Our message works!"}
);
}
);
	$(".example--2").click(function (){
	$("body").overhang({
	type:"error",message:"Whoops! Something went wrong!",closeConfirm:true}
);
}
);
	$(".example--3").click(function (){
	$("body").overhang({
	type:"info",message:"This message will close in 5 seconds!",duration:5,upper:true}
);
}
);
	$(".example--4").click(function (){
	$("body").overhang({
	type:"warn",message:"A user has reported you!",duration:3}
);
}
);
	$(".example--5").click(function (){
	$("body").overhang({
	type:"prompt",message:"What's your name?"}
);
}
);
	$(".example--6").click(function (){
	$("body").overhang({
	type:"info",message:$("body").data("overhangPrompt") || "You have not entered anything!"}
);
}
);
	$(".example--7").click(function (){
	$("body").overhang({
	type:"confirm",message:"Are you sure?"}
);
}
) $(".example--8").click(function (){
	var selected = $("body").data("overhangConfirm");
	if (selected === null){
	selected = "You have not entered anything!";
}
else{
	selected = selected ? "True!":"False!";
}
$("body").overhang({
	type:"info",message:selected}
);
}
);
	$(".example--9").click(function (){
	$("body").overhang({
	custom:true,textColor:"#FCE4EC",primary:"#F06292",accent:"#FCE4EC",message:"This is my custom message 😜"}
);
}
);
	$(".example--10").click(function (){
	$("body").overhang({
	type:"confirm",primary:"#40D47E",accent:"#27AE60",yesColor:"#3498DB",message:"Do you want to continue?",callback:function (){
	var selection = $("body").data("overhangConfirm");
	var response = selection ? "yes":"no";
	alert("You made your selection of " + response);
}
}
);
}
);
	$(".example--11").click(function (){
	var snapchatIcon = '<i class="fa fa-snapchat-ghost" style="color:#FFFC00" aria-hidden="true"></i>';
	var snapchatNote = ' Add "thepaulkr" on snapchat!';
	$("body").overhang({
	type:"confirm",primary:"#333333",accent:"#FFFC00",message:snapchatIcon + snapchatNote,custom:true,html:true,callback:function (){
	var selection = $("body").data("overhangConfirm");
	if (selection){
	window.open("https://www.snapchat.com/add/thepaulkr","_blank");
}
else{
	alert("Maybe next time then...");
}
}
}
);
}
);
}
);

CSS代码(index.css):

/** * index.css * Paul Krishnamurthy 2016 */
html,body{width:100%;height:100%;margin:0;background-color:#34495E;font-family:"Roboto",sans-serif;}
a,a:link,a:active,a:focus{text-decoration:none;color:inherit;}
a:hover{text-decoration:underline;}
.aligned-box{display:block;margin-left:auto;margin-right:auto;text-align:center;max-width:600px;}
.pre{font-weight:400;font-size:90px;}
.title{color:#F4B350;font-size:50px;margin-top:100px;font-weight:300;margin-bottom:10px;}
.descrip{font-size:22px;color:#ecf0f1;font-weight:300;}
.try-button{width:100px;height:40px;outline:none;border:none;border-radius:3px;font-size:17px;cursor:pointer;text-transform:uppercase;margin-bottom:6px;}
.sample{width:120px;height:50px;background-color:#ECF0F1;color:#34495E;margin-top:30px;margin:30px 0 80px 0;font-size:20px;}
.code-example,.code-info{display:inline-block;vertical-align:top;}
.example--left .code-info{margin-right:15px;}
.example--left .code-info .type{font-size:20px;color:#F4B350;margin-top:10px;text-align:right;}
.example--left .code-info button{background-color:#D6D6D6;color:#34495E;float:right;}
.example--right .code-info{margin-left:15px;}
.example--right .code-info .type{font-size:20px;color:#F4B350;margin-top:10px;text-align:left;}
.example--right .code-info button{background-color:#D6D6D6;color:#34495E;float:left;}
.code-example{margin-bottom:80px;}
footer p{text-align:center;color:#F4B350;padding:10px 0 15px 0;width:100%;}
@media (max-width:637px){.pre{font-size:60px;}
#Github iframe{display:none;}
#GithubBanner{z-index:1 !important;}
#Examples{display:none;}
footer p{position:absolute;bottom:0;}
}

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