13

你好，

我做了一个弹出窗口，默认情况下隐藏并在窗口上触发点击时打开。必须在触发事件的任何地方显示弹出窗口。但是有一些限制：

  1. 弹出窗口必须显示在当前可见窗口中。意思是，如果我单击窗口的最右侧，则弹出窗口必须显示在单击位置的右侧以避免滚动。

  2. 如果窗口有滚动，不管滚动它应该显示在窗口的可见部分。

在我目前的代码中一切正常，除非窗口有滚动。如果向下滚动并单击窗口中间，则弹出窗口显示在窗口当前显示区域............

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <style>
   div{
     border:1px solid;
     background:#ff9999;
     width:500px;
     height:500px;
     display:none;
     position:absolute;
   }
 </style>
  <script>
   var mouseX,mouseY,windowWidth,windowHeight;
   var  popupLeft,popupTop;
 $(document).ready(function(){

   $(document).mousemove(function(e){
           mouseX = e.pageX;
           mouseY = e.pageY;
           //To Get the relative position
           if( this.offsetLeft !=undefined)
             mouseX = e.pageX - this.offsetLeft;
           if( this.offsetTop != undefined)
             mouseY = e.pageY; - this.offsetTop;

           if(mouseX < 0)
                mouseX =0;
           if(mouseY < 0)
               mouseY = 0;

           windowWidth  = $(window).width();
           windowHeight = $(window).height();
   });

     $('html').click(function(){
       $('div').show();
      var popupWidth  = $('div').outerWidth();
      var popupHeight =  $('div').outerHeight();

      if(mouseX+popupWidth > windowWidth)
        popupLeft = mouseX-popupWidth;
      else
       popupLeft = mouseX;

      if(mouseY+popupHeight > windowHeight)
        popupTop = mouseY-popupHeight;
      else
        popupTop = mouseY; 
      if(popupLeft < 0)
          popupLeft = 0;
      if(popupTop < 0)
          popupTop = 0;

      $('div').offset({top:popupTop,left:popupLeft});
     });
 });
  </script>
 </head>

 <body>
        <br/><br/><br/>  <br/><br/><br/><br/> <br/><br/> <br/>   <br/>   <br/>   <br/>   <br/>   <br/> 
        <br/><br/> <br/> <br/> <br/>    <br/><br/><br/> <br/><br/>  <br/>   <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/>    

        <div>
         s dflasld fsadf
         sdfas dfsadf
        </div>

</body>

</html>

你能检查一下吗.......

4

2 回答 2

8

也许您可以在初始化时加载 windowW/H 并退出您的函数。

这个概念是使用mouseY-scrolled high，因为mouseY与body有关。所以使用这个：

 $(document).ready(function(){

     $('html').click(function(e){
      mouseX=e.pageX;
      mouseY=e.pageY;
      var bodyTop = document.documentElement.scrollTop + document.body.scrollTop;
      ..
      //window.outerWidth is not working in IE
      var windowWidth  = $(window).outerWidth();
      var windowHeight = $(window).outerHeight();
      ..
      if(mouseY-bodyTop+popupHeight > windowHeight)
        ...
        ...
      //set the position first. remove the position attr in css   
      $('div').css({position:"absolute",top:popupTop,left:popupLeft});
      $('div').show();
     });
 });
于 2012-05-08T05:23:07.187 回答
7

最后，我可以通过一些小的改动来做到这一点......这是一段运行良好的代码...... 

<html>
 <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
 <style>
   div{
     border:1px solid;
     background:#ff9999;
     width:500px;
     height:500px;
     display:none;
     position:absolute;
   }
 </style>
  <script>
   var mouseX,mouseY,windowWidth,windowHeight;
   var  popupLeft,popupTop;
 $(document).ready(function(){

   $(document).mousemove(function(e){
           mouseX = e.pageX;
           mouseY = e.pageY;
           //To Get the relative position
           if( this.offsetLeft !=undefined)
             mouseX = e.pageX - this.offsetLeft;
           if( this.offsetTop != undefined)
             mouseY = e.pageY; - this.offsetTop;

           if(mouseX < 0)
                mouseX =0;
           if(mouseY < 0)
               mouseY = 0;

           windowWidth  = $(window).width()+$(window).scrollLeft();
           windowHeight = $(window).height()+$(window).scrollTop();
   });

     $('html').click(function(){
       $('div').show();
      var popupWidth  = $('div').outerWidth();
      var popupHeight =  $('div').outerHeight();

      if(mouseX+popupWidth > windowWidth)
        popupLeft = mouseX-popupWidth;
      else
       popupLeft = mouseX;

      if(mouseY+popupHeight > windowHeight)
        popupTop = mouseY-popupHeight;
      else
        popupTop = mouseY; 

    if( popupLeft < $(window).scrollLeft()){
     popupLeft = $(window).scrollLeft();
    }

    if( popupTop < $(window).scrollTop()){
     popupTop = $(window).scrollTop();
    }

     if(popupLeft < 0 || popupLeft == undefined)
           popupLeft = 0;
      if(popupTop < 0 || popupTop == undefined)
           popupTop = 0;

      $('div').offset({top:popupTop,left:popupLeft});
     });
 });
  </script>
 </head>

 <body>
        <br/><br/><br/>  <br/><br/><br/><br/> <br/><br/> <br/>   <br/>   <br/>   <br/>   <br/>   <br/> 
        <br/><br/> <br/> <br/> <br/>    <br/><br/><br/> <br/><br/>  <br/>   <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>        

        <div>
         s dflasld fsadf
         sdfas dfsadf
        </div>

</body>

</html>
于 2012-05-09T05:32:20.683 回答