以下是 HTML5+CSS3内置功能按钮提示框特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5+CSS3内置功能按钮提示框 </title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="Message" id="js-timer">
<div class="Message-icon">
<i class="fa fa-bell-o"></i>
</div>
<div class="Message-body">
<p>This is a simple, but friendly, notification.</p>
<p class="u-italic">It will disappear within a few seconds.</p>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<div class="Message Message--orange">
<div class="Message-icon">
<i class="fa fa-exclamation"></i>
</div>
<div class="Message-body">
<p>This is a simple notification with a brighter color...</p>
<p>If you bring you mouse here you can close it manually.</p>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<div class="Message Message--green">
<div class="Message-icon">
<i class="fa fa-check"></i>
</div>
<div class="Message-body">
<p>This is a message telling you that everything is a-okay!</p>
<p>Good job, and good riddance.</p>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<div class="Message Message--red">
<div class="Message-icon">
<i class="fa fa-times"></i>
</div>
<div class="Message-body">
<p>This is a notification that something went wrong...</p>
<button class="Message-button" id="js-helpMe">Yikes, help me please!</button>
<button class="Message-button js-messageClose">Don't care.</button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<div class="Message">
<div class="Message-icon">
<i class="fa fa-bell-o"></i>
</div>
<div class="Message-body">
<p>Do you know that you can assign status and relation to a company right in the visit list?</p>
<button class="Message-button" id="js-showMe">Show me how</button>
<button class="Message-button js-messageClose">Nah, not interested</button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<div class="Message Message--orange">
<div class="Message-icon">
<i class="fa fa-exclamation"></i>
</div>
<div class="Message-body">
<p>You haven't authorized your LinkedIn account. Would you like some help with that?</p>
<p class="u-italic">With your account connected we can show you what connections you have at a company that visited your site!</p>
<button class="Message-button" id="js-authMe">Authorize!</button>
<button class="Message-button js-messageClose">I'll just keep using carrier pigeons</button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script src='js/jquery-1.9.1.js'></script>
<script src="js/index.js"></script>
</body>
</html>JS代码(index.js):
function closeMessage(el){
el.addClass('is-hidden');
}
$('.js-messageClose').on('click',function(e){
closeMessage($(this).closest('.Message'));
}
);
$('#js-helpMe').on('click',function(e){
alert('Help you we will,young padawan');
closeMessage($(this).closest('.Message'));
}
);
$('#js-authMe').on('click',function(e){
alert('Okelidokeli,requesting data transfer.');
closeMessage($(this).closest('.Message'));
}
);
$('#js-showMe').on('click',function(e){
alert("You're off to our help section. See you later!");
closeMessage($(this).closest('.Message'));
}
);
$(document).ready(function(){
setTimeout(function(){
closeMessage($('#js-timer'));
}
,5000);
}
);
CSS代码(style.css):
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{background-color:#ddd;font-family:'Source Sans Pro';font-weight:300;}
.Message{display:table;position:relative;margin:40px auto 0;width:500px;background-color:#0074d9;color:#fff;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;}
.Message.is-hidden{opacity:0;height:0;font-size:0;padding:0;margin:0 auto;display:block;}
.Message--orange{background-color:#f39c12;}
.Message--red{background-color:#ff4136;}
.Message--green{background-color:#2ecc40;}
.Message-icon{display:table-cell;vertical-align:middle;width:60px;padding:30px;text-align:center;background-color:rgba(0,0,0,0.25);}
.Message-icon > i{width:20px;font-size:20px;}
.Message-body{display:table-cell;vertical-align:middle;padding:30px 20px 30px 10px;}
.Message-body > p{line-height:1.2;margin-top:6px;}
.Message-button{position:relative;margin:15px 5px -10px;background-color:rgba(0,0,0,0.25);-webkit-box-shadow:0 3px rgba(0,0,0,0.4);box-shadow:0 3px rgba(0,0,0,0.4);border:none;padding:10px 15px;font-size:16px;font-family:'Source Sans Pro';color:#fff;outline:none;cursor:pointer;}
.Message-button:hover{background:rgba(0,0,0,0.3);}
.Message-button:active{background:rgba(0,0,0,0.3);-webkit-box-shadow:0 0px rgba(0,0,0,0.4);box-shadow:0 0px rgba(0,0,0,0.4);top:3px;}
.Message-close{position:absolute;background-color:rgba(0,0,0,0.3);color:#fff;border:none;outline:none;font-size:20px;right:5px;top:5px;opacity:0;cursor:pointer;}
.Message:hover .Message-close{opacity:1;}
.Message-close:hover{background-color:rgba(0,0,0,0.5);}
.u-italic{font-style:italic;}
分享到QQ
分享到微博
微信扫一扫
