页面载入中,请稍后...

加载中……

Jquery 淡入淡出弹窗效果
  

Posted in jQuery | By 快乐飞扬 | 18:07 | 评论(0) | 阅读(4104)
点击图片放大浏览
<link rel="stylesheet" rev="stylesheet" href="styles.css" type="text/css" media="all" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="my.common.js" type="text/javascript"></script>
</head>
<!-- 触发时间
  <body  onload="show()">
-->
<body >
    <div id="popupContact">  
        <a id="popupContactClose">x</a>  
        <h1>弹出窗口的标题</h1>  
        <p id="contactArea">  
            要关闭这个窗口,请点击弹窗外的背景或按下键盘上的ESC键。  
            

            <center><img src="logo_cn.png" alt=" GOOGLE"/></center><br />
        <form enctype="multipart/form-data" action="" method="post">
        选择文件:
        <input name="upload_file" type="file">
        <input type="submit" value=" 提交文件">
      </form>
        </p>  
    </div>  
<div id="backgroundPopup"></div>

$(document).ready(function(){
  //初始化:是否开启DIV弹出窗口功能
  //0 表示开启; 1 表示不开启;
  var popupStatus = 0;
  //使用Jquery加载弹窗
  function loadPopup(){  
  //仅在开启标志popupStatus为0的情况下加载  
  if(popupStatus==0){  
    $("#backgroundPopup").css({  
      "opacity": "0.7"  
    });  
    $("#backgroundPopup").fadeIn("slow");  
    $("#popupContact").fadeIn("slow");  
    popupStatus = 1;  
    }  
  }  
  //使用Jquery去除弹窗效果
  function disablePopup(){  
  //仅在开启标志popupStatus为1的情况下去除
    if(popupStatus==1){  
        $("#backgroundPopup").fadeOut("slow");  
        $("#popupContact").fadeOut("slow");  
        popupStatus = 0;  
      }  
  }
  //将弹出窗口定位在屏幕的中央
  function centerPopup(){  
  //获取系统变量
    var windowWidth = document.documentElement.clientWidth;  
    var windowHeight = document.documentElement.clientHeight;  
    var popupHeight = $("#popupContact").height();  
    var popupWidth = $("#popupContact").width();  
    //居中设置  
    $("#popupContact").css({  
      "position": "absolute",  
      "top": windowHeight/2-popupHeight/2,  
      "left": windowWidth/2-popupWidth/2  
    });  
    //以下代码仅在IE6下有效
      
    $("#backgroundPopup").css({  
      "height": windowHeight  
    });  
  }
  
  //打开弹出窗口  
  //按钮点击事件!
  $(document).ready(function(){  
    //调用函数居中窗口
    centerPopup();  
    //调用函数加载窗口
    loadPopup();
  });
  //关闭弹出窗口  
  //点击"X"所触发的事件
  $("#popupContactClose").click(function(){  
      disablePopup();  
  });  
  //点击窗口以外背景所触发的关闭窗口事件!
  $("#backgroundPopup").click(function(){  
    disablePopup();  
  });  
  //键盘按下ESC时关闭窗口!
  $(document).keypress(function(e){  
    if(e.keyCode==27 && popupStatus==1){  
      disablePopup();  
    }  
  });  
});
  //弹出提示定时关闭
  function show() {
    setTimeout(tan, 1000*5); //时间
  }
  function tan(){
    $("#backgroundPopup").fadeOut("slow");  
    $("#popupContact").fadeOut("slow");  
    popupStatus = 0;  
  }

   //打开弹出窗口  
  //按钮点击事件!
   $("#button").click(function(){  
    //调用函数居中窗口
     centerPopup();  
     //调用函数加载窗口
     loadPopup();  
   });
Tags: , , ,

原创文章,转载请注明转自快乐飞扬.本文链接地址:http://www.klfy.org/post/111/