popup displaying partly outside browser window

I am using CSS to create a pop-up on my page. I have a within the tag that is set to display:none;. Then when you hover over the tag the definition of the word pops up. This is working wonderful for me, HOWEVER sometimes the pop-up is appearing outside the browser window. Is there a way to make sure that the entire pop-up stays within the browser window with CSS or so I need to add in some Javascript? I would really like the pop-up to appear at the location of the link but I don't care if it moves left or right in order to be within the window and visible.

This is my code:

a span {
display: none;
}

a:hover span {
display: block;
position: absolute;
width: 300px;
z-index: 1000;
}

Thank you in advance for your help! :-)

---

So, if you put the class "hvrpop-link" on the element you hover over and under that you put the class "hvrpop-win" on the window/menu that popups up. Then the following will nudge the popup window/menu over to the left just enough to keep it on screen. Note - it you already have a margin-left on the popup window you might need to save it down in "data" or something so it goes back to the correct place if you resize the window.

It seems to work all the way back to IE7:

$(function() {
    $('.hvrpop-link').hover(function() {
        var win=$(this).find('.hvrpop-win:visible');
        if(win.length>0) {
            var screenwidth=$('body').width();
            var width=win.width();
            var pos=win.position();
            var rightpos=width+pos.left;
            if(rightpos>screenwidth) {
                var moveleft=rightpos-screenwidth;
                win.css('margin-left','-'+moveleft+'px');
            } else {
                win.css('margin-left','0px');
            }
        }
    });
});

---

You can check whether the corners of the popup are inside the window with jQuery. Have a look at this: How to check if an element is off-screen

---

将更好地使用CSS代码：

a span {
    position: absolute;
    z-index: 100000;
    display: none;
    min-width: 100px;
    max-width: 50%;
    left: 50%;
    margin-left: -25%;
}
a:hover span {
    display: block;
}

链接地址: http://www.djcxy.com/p/14630.html

上一篇: 如何根据页面位置更改导航链接颜色

下一篇: 在浏览器窗口外部分弹出显示