Open popup at clicked position

问题

Hi,

I have done a popup which is by default hidden and opened whenever a click is triggered on window. Popup must be shown at wherever the event is triggered.But there are some constraints:

Popup must be shown at current visible window.Meaning,If I clicked at right most part of the window then,popup must be shown to right side of the clicked position to avoid scrolling.
If window has scrolling, irrespective of scrolling it should be shown at visible part of the window.

Everything is working fine in my present code except in the case,if window has scrolling. If scroll down and click on the middle of the window, popup is displayed at out of the window current display area.........................

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

Can you please check it.......

回答1:

maybe you can load the windowW/H in the init time and out of your function.

The concept is use the mouseY-scrolled high, because the mouseY is related to the body.so use this:

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

回答2:

Finally, I could done it by having small changes...This is the piece of code that works fine...

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

来源：https://stackoverflow.com/questions/10492910/open-popup-at-clicked-position

标签

javascript

jquery

html

popup

mouse-position