问在点击位置打开弹出
EN

Stack Overflow用户

提问于 2012-05-07 21:13:06

回答 2查看 33.3K关注 0票数 13

嗨,

我已经做了一个弹出，在默认情况下隐藏和打开，每当点击是在窗口上触发。在事件为triggered.But的地方必须显示弹出窗口，这里有一些约束：

弹出必须显示在当前可见的window.Meaning，如果我在窗口的右半部分单击，则必须将弹出显示在单击位置的右侧以避免滚动。如果窗口有滚动，则应显示在窗口的可见部分。

。

除了在这种情况下，如果窗口有滚动，在我现在的代码中，一切都很正常。如果向下滚动并单击窗口中部，弹出窗口将显示在窗口当前显示区域外.

<!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>

你能检查一下吗.

javascript

jquery

html

popup

mouse-position

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-05-08 21:32:20

最后，我可以通过使用小changes...This来完成它，这是一段很好的代码.

<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>

票数 8

Stack Overflow用户

发布于 2012-05-07 21:23:07

也许您可以在init时间内加载windowW/H，而不是使用您的功能。

这个概念是使用鼠标滚动的高度，因为mouseY与body.so相关--使用如下所示：

 $(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();
     });
 });