小虎博客

A-A+

jquery实现点击弹出带标题栏的弹出层效果代码

2016年01月12日 编程技术 暂无评论

弹出层在现代的开发中用到非常的多特别是在手机网站开发时我们都会用到弹出层效果了，下面来看一篇jquery,弹出带标题栏的弹出层效果例子。

这是一款jquery实现的弹出层，点击文字后从网页右上角飞入，也可以说是滑入，此类弹出框带有关闭按钮，可自定义标题栏和弹出框内容，风格自己可定义，代码简洁，基于jquery实现,实现代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""  
  2. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.    
  4. <html xmlns=" http://www.w3.org/1999/xhtml">  
  5.    
  6. <head>  
  7.    
  8. <meta charset="utf-8">  
  9.    
  10. <title>jQuery从页面右上角弹出的浮层代码</title>  
  11.    
  12. <style>  
  13.    
  14. *{margin:0;padding:0;list-style-type:none;}  
  15.    
  16. body{font-family:'microsoft yahei';}  
  17.    
  18. a{text-decoration:none;}  
  19.    
  20. .showdiv{color:#fff;padding:8px 15px;background:#09F;text-align:center;display:block;width:150px;margin:100px auto;}  
  21.    
  22. .showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}  
  23.    
  24. .showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}  
  25.    
  26. .showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}  
  27.    
  28. .showbox .mainlist{padding:10px;}  
  29.    
  30. .showbox .mainlist p{font:normal 14px/2 'microsoft yahei';text-indent:2em;color:#333;padding-top:5px;}  
  31.    
  32. #zhezhao{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}  
  33.    
  34. </style>  
  35.    
  36. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="jquery.min.js"></script>  
  37.    
  38. <script type="text/javascript">  
  39.    
  40. $(document).ready(function(){  
  41.    
  42. $(".showdiv").click(function(){  
  43.    
  44. var box =300;  
  45.    
  46. var th= $(window).scrollTop()+$(window).height()/1.6-box;  
  47.    
  48. var h =document.body.clientHeight;  
  49.    
  50. var rw =$(window).width()/2-box;  
  51.    
  52. $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);  
  53.    
  54. $("#zhezhao").css({  
  55.    
  56. display:"block",height:$(document).height()  
  57.    
  58. });  
  59.    
  60. return false;  
  61.    
  62. });  
  63.    
  64. $(".showbox .close").click(function(){  
  65.    
  66. $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);  
  67.    
  68. $("#zhezhao").css("display","none");  
  69.    
  70. });  
  71.    
  72. });  
  73.    
  74. </script>  
  75.    
  76. </head>  
  77.    
  78. <body>  
  79.    
  80. <a class="showdiv" href="#">点击我弹出浮层</a>  
  81.    
  82. <div class="showbox">  
  83.    
  84. <h2>脚本之家简介<a class="close" href="#">关闭</a></h2>  
  85.    
  86. <div class="mainlist">  
  87.    
  88. <p>  
  89.    
  90. 我是弹窗  
  91.    
  92. 我是弹窗  
  93.    
  94. 我是弹窗  
  95.    
  96. 我是弹窗  
  97.    
  98. </p>  
  99.    
  100. </div>  
  101.    
  102. </div>  
  103.    
  104. <div id="zhezhao"></div>  
  105.    
  106. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">  
  107.    
  108. </div>  
  109.    
  110. </body>  
  111.    
  112. </html>  
标签：

给我留言