Open popup at clicked position

前端未结

关注

 2  1912

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

相关标签:

2条回答

一个人的身影

2021-02-04 10:33

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

0 讨论(0)

心在旅途

2021-02-04 10:47

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>

0 讨论(0)