javascript - reproducir - ventana flotante html al hacer clic
Abrir ventana emergente en la posición clicada (2)
Hola,
He hecho una ventana emergente que, por defecto, está oculta y abierta cada vez que se hace clic en la ventana. Popup se debe mostrar en cualquier lugar donde se desencadene el evento. Pero hay algunas restricciones:
La ventana emergente debe mostrarse en la ventana visible actual. Por lo tanto, si hice clic en la parte derecha de la ventana, la ventana emergente debe mostrarse en el lado derecho de la posición en la que se hizo clic para evitar el desplazamiento.
Si la ventana tiene desplazamiento, independientemente de desplazarse, se debe mostrar en la parte visible de la ventana.
Todo funciona bien en mi código actual, excepto en el caso, si la ventana se ha desplazado. Si se desplaza hacia abajo y hace clic en el medio de la ventana, aparece una ventana emergente fuera del área de visualización actual de la ventana .........................
<!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>
¿Puedes verificarlo .......
Finalmente, pude hacerlo teniendo pequeños cambios ... Esta es la pieza de código que funciona bien ...
<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>
quizás pueda cargar la ventana W / H en el tiempo de inicio y fuera de su función.
El concepto es usar mouseY-scrolled high, porque el mouseY se relaciona con el cuerpo.utilice esto:
$(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();
});
});