使用jquery

Question

我正在尝试为div我的网站创建一个pop up 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

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

＆＃13;

＆＃13;

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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;