您现在的位置： 365建站网 > 365文章 > jquery网页自动弹出层的方法

jquery网页自动弹出层的方法

文章来源：365jz.com     点击数：1241    更新时间：2018-07-31 10:24   参与评论

1、JQuery效果

2、步骤分析：

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作


</>code
  1. <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  2.     <script>
  3.       $(function(){
  4.         //1.书写显示广告图片的定时操作
  5.         time=setInterval("showAd()",3000);
  6.       });
  7.       //2.书写显示图片的函数
  8.       function showAd(){
  9.         //3.获取广告图片，并让其显示
  10.         //$("#img_2").show(1000);
  11.         $("#img_2").slideDown(3000);  //滑入
  12.         //4.清除显示图片的定时操作
  13.         clearInterval(time);
  14.         //5.设置隐藏图片的定时操作
  15.         time=setInterval("hiddenAd()",3000);
  16.       }
  17.       function hiddenAd(){
  18.         //6.获取广告图片让其隐藏
  19.         //$("#img_2").hide();
  20.         $("#img_2").slideUp(3000);  //滑出
  21.         //7.清除隐藏图片的定时操作
  22.         clearInterval(time);
  23.       }   
  24.     </script>

   


jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能



</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>www.jb51.net - jQuery简便实现遮罩层</title>
  6. <meta charset="utf-8">
  7. <style>
  8. body {
  9. font-family:Arial, Helvetica, sans-serif;
  10. font-size:12px;
  11. margin:0;
  12. }
  13. #main {
  14. height:1800px;
  15. padding-top:90px;
  16. text-align:center;
  17. }
  18. #fullbg {
  19. background-color:gray;
  20. left:0;
  21. opacity:0.8;
  22. position:absolute;
  23. top:0;
  24. z-index:3;
  25. filter:alpha(opacity=80);
  26. -moz-opacity:0.5;
  27. -khtml-opacity:0.5;
  28. }
  29. #dialog {
  30. background-color:#fff;
  31. border:5px solid rgba(0,0,0, 0.8);
  32. height:400px;
  33. left:50%;
  34. margin:-200px 0 0 -200px;
  35. padding:1px;
  36. position:fixed !important; /* 浮动对话框 */
  37. position:absolute;
  38. top:50%;
  39. width:400px;
  40. z-index:5;
  41. border-radius:5px;
  42. display:none;
  43. }
  44. #dialog p {
  45. margin:0 0 12px;
  46. height:24px;
  47. line-height:24px;
  48. background:#CCCCCC;
  49. }
  50. #dialog p.close {
  51. text-align:right;
  52. padding-right:10px;
  53. }
  54. #dialog p.close a {
  55. color:#fff;
  56. text-decoration:none;
  57. }
  58. </style>
  59. <script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
  60. <script>
  61. $(document).ready(function(){
  62.  showBg();
  63. });
  64. </script>
  65. <script type="text/javascript">
  66. //显示灰色 jQuery 遮罩层
  67. function showBg() {
  68.   var bh = $("body").height();
  69.   var bw = $("body").width();
  70.   $("#fullbg").css({
  71.     height:bh,
  72.     width:bw,
  73.     display:"block"
  74.   });
  75.  $("#dialog").show();
  76. }
  77. //关闭灰色 jQuery 遮罩
  78. function closeBg() {
  79. $("#fullbg,#dialog").hide();
  80. }
  81. </script>
  82. </head>
  83. <body>
  84. <div id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
  85. <div id="fullbg"></div>
  86. <div id="dialog">
  87.   <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
  88.   <div>正在加载，请稍后....</div>
  89. </div>
  90. </div>
  91. </body>
  92. </html>


jQuery弹出提示信息简洁版（自动消失）


　　之前看了有一些现成的blockUI、Boxy、tipswindow等的jQuery弹出层插件，可是我的要求并不高，只需要在保存后弹出提示信息即可，至于复杂点的弹出层-可以编辑的，我是直接用bootstrap的modal来实现的，因此我就自己做了一个简洁的可以用来弹出提示信息的功能。


　　首先在页面放一个提示strong：<strong id="tip"></strong>。接下来给它设置一下样式：


　　提示信息样式


</>code
  1. #tip {
  2.     position: absolute;
  3.     top: 50px;
  4.     left: 50%;
  5.     display: none;
  6.     z-index: 9999;
  7. }


　　提示信息脚本


</>code
  1. //tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
  2. function showTip(tip, type) {
  3.     var $tip = $('#tip');
  4.     $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
  5. }


　　这样子，简单的jQuery弹出提示信息就完成了。话说上面的东西做了什么呢，其实就是弹出一个提示信息，该信息位置在网页top50px，left50%，然后再用margin-left左移信息的一半宽度，以此实现左右居中，半秒fadeIn显示，2秒停留，然后半秒fadeOut消失。除此之外呢其实我还给弹出信息美化了一下，就是用了bootstrap的alert alert-success alert-danger alert-info样 alert-warning式来美化。还有为什么要用stop(true)呢，主要是因为连续弹出多个提示框的时候，我的做法是让之前的提示框直接结束所有运动，w3c一看，$(selector).stop(stopAll,goToEnd)，stopAll就是停止未完成的所有运动。


　　不过这样有个问题，如果文本太短觉得不好怎么办，那就给它#tip加个最小宽度：

</>code
  1. min-width: 200px;
  2. text-align: center;

　　至于为何不给showTip方法加个参数设置弹出信息的停留时间呢，那只是我不需要这个参数，直接写死也可以，这只是个人作风。还有个问题是showTip方法用起来还是有点不方便呀，那就再封装一下：


</>code
  1. function ShowMsg(msg) {
  2.     ShowTip(msg, 'info');
  3. }
  4. function ShowSuccess(msg) {
  5.     ShowTip(msg, 'success');
  6. }
  7. function ShowFailure(msg) {
  8.     ShowTip(msg, 'danger');
  9. }
  10. function ShowWarn(msg, $focus, clear) {
  11.     ShowTip(msg, 'warning');
  12.     if ($focus) {
  13. 　　　　 $focus.focus();
  14.     　　if (clear) $focus.val('');
  15. 　 　}
  16.     return false;
  17. }


　　这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。你可能会有疑问ShowWarn怎么长的不一样，是干嘛子的呢，主要是因为在表单提交的时候需要进行验证，客户端验证的时候就调用这个方法，用法例如：

加两个参数$focus和clear主要是为了方便使用。。。


　　另外若网页有iframe内联框架，若该iframe里也想让顶级窗口弹出提示信息，则得改一下showTip方法：


</>code
  1. //tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
  2. function showTip(tip, type) {
  3. 　　var $tip = $('#tip', top.document); 
  4. 　　$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
  5. }


　　如果不想样式和span以及脚本太分散，可以把他们整合成一个js插件：


</>code
  1. //tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
  2. function ShowTip(tip, type) {
  3.     var $tip = $('#tip');
  4.     if ($tip.length == 0) {
  5.         $tip = $('<strong id="tip" style="position:absolute;top:50px;left: 50%;z-index:9999"></strong>');
  6.         $('body').append($tip);
  7.     }
  8.     $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
  9. }
  10. function ShowMsg(msg) {
  11.     ShowTip(msg, 'info');
  12. }
  13. function ShowSuccess(msg) {
  14.     ShowTip(msg, 'success');
  15. }
  16. function ShowFailure(msg) {
  17.     ShowTip(msg, 'danger');
  18. }
  19. function ShowWarn(msg, $focus, clear) {
  20.     ShowTip(msg, 'warning');
  21.     if ($focus) {
  22. 　　　　 $focus.focus();
  23.     　　if (clear) $focus.val('');
  24. 　　 }
  25.     return false;
  26. }


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (1241人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号