您现在的位置: 365建站网 > 365学习 > jquery网页自动弹出层的方法

jquery网页自动弹出层的方法

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

1、jQuery效果

2、步骤分析:

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

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

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

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

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

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

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

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

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


<script type="text/JavaScript" src="../js/jquery-1.8.3.js"></script>
    <script>
      $(function(){
        //1.书写显示广告图片的定时操作
        time=setInterval("showAd()",3000);
      });
      //2.书写显示图片的函数
      function showAd(){
        //3.获取广告图片,并让其显示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑入
        //4.清除显示图片的定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.获取广告图片让其隐藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);  //滑出
        //7.清除隐藏图片的定时操作
        clearInterval(time);
      }   
    </script>

   


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



<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xhtml">
<head>
<title>www.jb51.net - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").CSS({
    height:bh,
    width:bw,
    display:"block"
  });
 $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<div id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
  <div>正在加载,请稍后....</div>
</div>
</div>
</body>
</html>


jQuery弹出提示信息简洁版(自动消失)


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


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


  提示信息样式


#tip {
    position: absolute;
    top: 50px;
    left: 50%;
    display: none;
    z-index: 9999;
}


  提示信息脚本


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


  这样子,简单的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加个最小宽度:

min-width: 200px;
text-align: center;

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


function ShowMsg(msg) {
    ShowTip(msg, 'info');
}
function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}
function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}
function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
     $focus.focus();
      if (clear) $focus.val('');
   }
    return false;
}


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

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


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


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


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


//tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
        $tip = $('<strong id="tip" style="position:absolute;top:50px;left: 50%;z-index:9999"></strong>');
        $('body').append($tip);
    }
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}
function ShowMsg(msg) {
    ShowTip(msg, 'info');
}
function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}
function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}
function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
     $focus.focus();
      if (clear) $focus.val('');
   }
    return false;
}


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


发表评论 (169人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------