I'm trying to make a pop-up box show on top of everything when I hover over some city names. It doesn't seem to overlap with z-index set to 999 and position: absolute, it doesn't even show. This is jQuery script
$(function() {
var moveLeft = 0;
var moveDown = 0;
$('a.popper').hover(function(e) {
var target = '#' + ($(this).attr('data-popbox'));
$(target).show();
moveLeft = $(this).outerWidth();
moveDown = ($(target).outerHeight() / 2);
}, function() {
var target = '#' + ($(this).attr('data-popbox'));
$(target).hide();
});
$('a.popper').mousemove(function(e) {
var target = '#' + ($(this).attr('data-popbox'));
leftD = e.pageX + parseInt(moveLeft);
maxRight = leftD + $(target).outerWidth();
windowLeft = $(window).width() - 40;
windowRight = 0;
maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
if(maxRight > windowLeft && maxLeft > windowRight)
{
leftD = maxLeft;
}
topD = e.pageY - parseInt(moveDown);
maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
maxTop = topD;
windowTop = parseInt($(document).scrollTop());
if(maxBottom > windowBottom)
{
topD = windowBottom - $(target).outerHeight() - 20;
} else if(maxTop < windowTop){
topD = windowTop + 20;
}
$(target).css('top', topD).css('left', leftD);
});
})(jQuery);
This is the CSS
.popbox {
position: absolute;
display: none;
z-index: 999;
width: 400px;
padding: 10px;
background: #EEEFEB;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2
{
background-color: #4D4F53;
color: #E3E5DD;
font-size: 14px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;
}
This is the HTML
<div id="pop1" class="popbox">
<h2>Youth Academy Bucuresti</h2>
<p>Membri:</p>
</div>
<div id="pop2" class="popbox">
<h2>Youth Academy Piatra Neamt</h2>
<p>Membri</p>
</div>
These are the cities: <a href="#" class="popper" data-popbox="pop1">Bucuresti</a>, <a href="#" class="popper" data-popbox="pop2">Piatra Neamt</a> etc.
Seems that without this block of code
$('a.popper').mousemove(function(e) {
var target = '#' + ($(this).attr('data-popbox'));
leftD = e.pageX + parseInt(moveLeft);
maxRight = leftD + $(target).outerWidth();
windowLeft = $(window).width() - 40;
windowRight = 0;
maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
if(maxRight > windowLeft && maxLeft > windowRight)
{
leftD = maxLeft;
}
topD = e.pageY - parseInt(moveDown);
maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
maxTop = topD;
windowTop = parseInt($(document).scrollTop());
if(maxBottom > windowBottom)
{
topD = windowBottom - $(target).outerHeight() - 20;
} else if(maxTop < windowTop){
topD = windowTop + 20;
}
$(target).css('top', topD).css('left', leftD);
});
the pop-up box appear and dissapears just fine. Any ideas?
Check the JS Console for errors. There are some. However, it's not a good idea to let the JavaScript self execute before anything is ready.
Instead try to hook it all up in the document ready Event.
$(document).ready(function () {
Your foo..
});
I have putted it all together in the fiddle for you: http://jsfiddle.net/wh2zxd2z/
Is this the expected result?
It should work... See
I think you have missed the Jquery should load on top.
And your Width of the popup should be Auto. Unless it will expand the window.
.popbox {
width: auto;
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.