javascript - 使用 jquery 的响应式弹出 div

Question

我正在尝试为我的网站创建一个悬停在 div 上的弹出式 div，例如 homeaway 网站的右上角图像部分。

我尝试了以下示例。

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();
}, function () {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($("a.popper").hasClass("show"))) {
        $(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() - 10;
    windowRight = 0;
    /*maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 10);*/
    maxLeft = e.pageX - (parseInt(moveLeft) + 100);
    if (maxRight > windowLeft && maxLeft > windowRight) {
        leftD = maxLeft;
    }
    topD = e.pageY - parseInt(moveDown);
    maxBottom = parseInt(e.pageY + parseInt(moveDown) + 40);
    windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
    maxTop = topD;
    windowTop = parseInt($(document).scrollTop());
    if (maxBottom > windowBottom) {
        topD = windowBottom - $(target).outerHeight() - 10;
    } else if (maxTop < windowTop) {
        topD = windowTop + 25;
    }
	//$(target).css('top', 65).css('left', 1030);
   $(target).css('top', topD).css('left', leftD);
});
$('a.popper').click(function (e) {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($(this).hasClass("show"))) {
        $(target).show();
    }
    $(this).toggleClass("show");
});

.popbox {
    display: none;
    position: absolute;
    z-index: 99999;
    width: 250px;
    padding: 10px;
    background-color: #FFFAFF;
    color: #000000;
    border: 2px solid #77C5ED;
    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);
    right:5px;
    top: 10053px;
}
.popbox h2 {
    background-color: #4D4F53;
    color: #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="popper" data-popbox="pop1" style="padding:0;"><img  />Text</a>
<div id="pop1" class="popbox">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus mauris sed elit imperdiet pharetra. 

  Suspendisse semper diam eleifend, vehicula arcu eget, porttitor mi. In hac habitasse platea dictumst. Phasellus eget ultrices erat. 

  In a neque velit. Vivamus sagittis lacinia erat a tristique. Vivamus et libero erat.
</div>

我的 JS FIDDLE link

我要实现的是，

无论文本位于何处，弹出式 div 都应显示在文本下方。但是我无法前进。

Answer 1

我希望我能满足您的所有要求。

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();
}, function () {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($("a.popper").hasClass("show"))) {
        $(target).hide();
    }
});
$('a.popper').mousemove(function (e) {
    var elem = $(this);
    var target = '#' + (elem.attr('data-popbox'));
    leftD = e.pageX;// + parseInt(moveLeft);
    maxRight = leftD + $(target).outerWidth();
    windowLeft = $(window).width() - 10;
    windowRight = 0;
    /*maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 10);*/
    maxLeft = e.pageX - (parseInt(moveLeft) + 100);
    if (maxRight > windowLeft && maxLeft > windowRight) {
        leftD = maxLeft;
    }
    topD = e.pageY - parseInt(moveDown);
    maxBottom = parseInt(e.pageY + parseInt(moveDown) + 40);
    windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
    maxTop = topD;
    windowTop = elem.offset().top + elem.outerHeight(true);
    if (maxBottom > windowBottom) {
        topD = windowBottom - $(target).outerHeight() - 10;
        leftD += 20;
    } else if (maxTop < windowTop) {
        topD = windowTop + 10;
    }
	//$(target).css('top', 65).css('left', 1030);
   $(target).css('top', topD).css('left', leftD);
});
$('a.popper').click(function (e) {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($(this).hasClass("show"))) {
        $(target).show();
    }
    $(this).toggleClass("show");
});

.popbox {
    display: none;
    position: absolute;
    z-index: 99999;
    width: 250px;
    padding: 10px;
    background-color: #FFFAFF;
    color: #000000;
    border: 2px solid #77C5ED;
    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);
    right:5px;
    top: 10053px;
}
.popbox h2 {
    background-color: #4D4F53;
    color: #E3E5DD;
    font-size: 14px;
    display: block;
    width: 100%;
    margin: -10px 0px 8px -10px;
    padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="popper" data-popbox="pop1" style="padding:0;"><img  />Text</a>
<div id="pop1" class="popbox">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus mauris sed elit imperdiet pharetra. 

  Suspendisse semper diam eleifend, vehicula arcu eget, porttitor mi. In hac habitasse platea dictumst. Phasellus eget ultrices erat. 

  In a neque velit. Vivamus sagittis lacinia erat a tristique. Vivamus et libero erat.
</div>