我要投稿 投诉建议

电脑中设置弹窗的相关代码

时间:2021-01-20 09:41:14 电脑知识 我要投稿

电脑中设置弹窗的相关代码

  复制代码 代码如下:

电脑中设置弹窗的相关代码

  //窗口的高度

  var windowHeight;

  //窗口的'宽度

  var windowWidth;

  //弹窗的高度

  var popHeight;

  //弹窗的宽度

  var popWidth;

  //滚动条滚动的高度

  var scrollTop;

  //滚动条滚动的宽度

  var scrollleft;

  //延时的时间

  var timeout;

  function init(){

  //获得窗口的高度

  windowHeight=$(window).height();

  //获得窗口的宽度

  windowWidth=$(window).width();

  //获得弹窗的高度

  popHeight=$(".window").height();

  //获得弹窗的宽度

  popWidht=$(".window").width();

  //获得滚动条的高度

  scrollTop=$(window).scrollTop();

  //获得滚动条的宽度

  scrollleft=$(window).scrollLeft();

  }

  //定义关闭窗口

  function closeWindow(){

  $(".title img").click(function (){

  $(this).parent().parent().hide("slow");

  });

  }

  //定义弹出窗口的方法

  function popcenterWindow(){

  //先清空上一次的延迟

  clearTimeout(timeout);

  timeout=setTimeout(function (){

  init();

  var popY=(windowHeight-popHeight)/2+scrollTop;

  var popX=(windowWidth-popWidht)/2+scrollleft;

  $("#center").animate({top:popY,left:popX},300).show("slow");},300);

  closeWindow();

  }

  function popleftWindow(){

  clearTimeout(timeout);

  timeout=setTimeout(function (){

  init();

  var popY=windowHeight+scrollTop-popHeight-10;

  var popX=scrollleft-5;

  $("#left").animate({top:popY,left:popX},300).show("slow");},300);

  closeWindow();

  }

  function poprightWindow(){

  clearTimeout(timeout);

  timeout=setTimeout(function (){

  init();

  var popY=windowHeight-popHeight+scrollTop-10;

  var popX=windowWidth-popWidht+scrollleft-10;

  $("#right").animate({top:popY,left:popX},300).show("slow");},300);

  closeWindow();

  }

  CSS

  复制代码 代码如下:

  .window{

  width:250px;

  background-color:#3FF;

  padding:2px;

  margin:5px;

  position:absolute;

  display:none;

  }

  .content{

  height:150px;

  background-color:#FFF;

  padding:2px;

  font-size:14px;

  overflow:auto;

  }

  .title{

  padding:2px;

  color:#999;

  font-size:14px;

  }

  .title img{

  float:right;

  cursor:pointer;

  }

【电脑中设置弹窗的相关代码】相关文章:

电脑一直弹窗怎么解决11-29

电脑中病毒怎么处理05-29

描写电的成语02-24

参考文献代码介绍01-29

海关国别地区代码表03-30

海关通关用途代码表10-09

征免性质代码表概括02-03

关于电商的调研报告07-29

电关于话面试的技巧03-17

海关报关成交方式代码表10-09