在网页中为了弹出广告或是提示信息，会在右下角实现弹出层
展示页面
index.html
<!DOCTYPE HTML> <html> <head> <title>右下角弹出</title> </head> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="jquery.1.4.2-min.js"></script> <script type="text/javascript" src="main.js"></script> <style type="text/css"> </style> <script type="text/javascript"> function showMessager (arg) { $("#Messager").showDiv(arg); var bottomHeight = "-"+document.documentElement.scrollTop; var bottomWidth = document.body.scrollWidth*0.84; $("#Messager").css("bottom", bottomHeight + "px"); $("#Messager").css("left", bottomWidth + "px"); } function closeMessager (arg) { $("#Messager").hideDiv(arg); } </script> <body> <br><br><br> <input type="button" class="button" onclick="showMessager('sideUp')" value="下方滑出"> <input type="button" class="button" onclick="showMessager('fadeIn')" value="淡出"> <div id="Messager" class="white_content"> <div class="message_title"> Messager <div style="text-align: right; height:20px;float:right;"> <a style="font-size: 16px;cursor: pointer; " onclick="closeMessager('sideDown')">关闭</a> </div> </div> 白强教你如何制作一个弹出层，天天开心快乐！！ </div> </body> </html>
index.css
.button { display: inline-block; position: relative; margin: 10px; padding: 0 20px; text-align: center; text-decoration: none; font: bold 12px/25px Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px rhba(255,255,255, .22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44); -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; -ms-transition: all 0.15s ease; transition: all 0.15s ease; cursor: pointer; } .white_content { display: none; position: absolute; float: right; margin-bottom: 1px; left: 85%; width: 15%; height: 10%; border: 1px solid lightblue; background-color: white; z-index:1002; overflow: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); -box-shadow: 0 0 10px rgba(0,0,0,.4); } .message_title{ height: 20px; border: 1px solid lightblue; background-color: lightblue; z-index:1002; overflow: auto; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); -box-shadow: 0 0 10px rgba(0,0,0,.4); }
main.js
$.fn.showDiv = function(arg){ switch(arg){ case 'sideUp': this.animate({ height:'show'},'slow'); break; case 'fadeIn': this.animate({ opacity: 'show' },'slow'); break; } }; $.fn.hideDiv = function(arg){ switch(arg){ case 'sideDown': this.animate({ height:'hide'},'slow'); break; case 'fadeOut': this.animate({ opacity: 'hide' },'slow'); break; } };