web-dev-qa-db-ja.com

クリックした位置でポップアップを開く

こんにちは、

ウィンドウでクリックがトリガーされるたびにデフォルトで非表示になり、開くポップアップを実行しました。イベントがトリガーされる場所にポップアップを表示する必要がありますが、いくつかの制約があります。

  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>

確認して頂けますか……。

javascriptjqueryhtmlpopupmouse-position
12
Rama Rao M

最後に、小さな変更を加えることでそれを行うことができました...これは正常に機能するコードです...

<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>
6
Rama Rao M

たぶん、初期化時間内に関数からwindowS/Hをロードできます。

MouseYはbodyに関連しているため、コンセプトは、mouseYでスクロールされた高さを使用することです。したがって、これを使用します。

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