在点击位置打开弹窗-前端问题

Open popup at clicked position(在点击位置打开弹窗)

本文介绍了在点击位置打开弹窗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好，

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

弹出窗口必须显示在当前可见窗口.意思是，如果我点击了窗口的最右侧，那么弹出窗口必须显示在点击位置的右侧以避免滚动.
李>
如果窗口有滚动，无论是否滚动，它都应该显示在窗口的可见部分.

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

<!DOCTYPE HTML PUBLIC><html><头><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><风格>分区{边框:1px 实心；背景:#ff9999;宽度:500 像素；高度:500 像素；显示:无；位置:绝对；}</风格><脚本>var mouseX,mouseY,windowWidth,windowHeight;var popupLeft,popupTop;$(文档).ready(函数(){$(文档).mousemove(函数(e){mouseX = e.pageX;鼠标Y = e.pageY;//获取相对位置如果(this.offsetLeft！=未定义)mouseX = e.pageX - this.offsetLeft;如果(this.offsetTop！=未定义)鼠标Y = e.pageY;- this.offsetTop;如果(鼠标 X <0)鼠标X = 0;如果(鼠标Y <0)鼠标Y = 0;windowWidth = $(window).width();windowHeight = $(window).height();});$('html').click(函数(){$('div').show();var popupWidth = $('div').outerWidth();var popupHeight = $('div').outerHeight();if(mouseX+popupWidth > 窗口宽度)popupLeft = mouseX-popupWidth;别的popupLeft = mouseX;if(mouseY+popupHeight > windowHeight)popupTop = mouseY-popupHeight;别的popupTop = mouseY;if(popupLeft < 0)弹出左= 0；如果(弹出顶部 <0)弹出顶部 = 0;$('div').offset({top:popupTop,left:popupLeft});});});</脚本></头><身体><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/>s dflasld fsadfsdfas dfsadf</div></身体></html>

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

解决方案

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

<html><头><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><风格>分区{边框:1px 实心；背景:#ff9999;宽度:500 像素；高度:500 像素；显示:无；位置:绝对；}</风格><脚本>var mouseX,mouseY,windowWidth,windowHeight;var popupLeft,popupTop;$(文档).ready(函数(){$(文档).mousemove(函数(e){mouseX = e.pageX;鼠标Y = e.pageY;//获取相对位置如果(this.offsetLeft！=未定义)mouseX = e.pageX - this.offsetLeft;如果(this.offsetTop！=未定义)鼠标Y = e.pageY;- this.offsetTop;如果(鼠标 X <0)鼠标X = 0;如果(鼠标Y <0)鼠标Y = 0;windowWidth = $(window).width()+$(window).scrollLeft();windowHeight = $(window).height()+$(window).scrollTop();});$('html').click(函数(){$('div').show();var popupWidth = $('div').outerWidth();var popupHeight = $('div').outerHeight();if(mouseX+popupWidth > 窗口宽度)popupLeft = mouseX-popupWidth;别的popupLeft = mouseX;if(mouseY+popupHeight > windowHeight)popupTop = mouseY-popupHeight;别的popupTop = mouseY;if(popupLeft < $(window).scrollLeft()){popupLeft = $(window).scrollLeft();}if(popupTop < $(window).scrollTop()){popupTop = $(window).scrollTop();}如果(popupLeft < 0 || popupLeft == 未定义)弹出左= 0；如果(popupTop < 0 || popupTop == 未定义)弹出顶部 = 0;$('div').offset({top:popupTop,left:popupLeft});});});</脚本></头><身体><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/>s dflasld fsadfsdfas dfsadf</div></身体></html>

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

解决方案

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>

这篇关于在点击位置打开弹窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐