Question

我正在使用它并且它可以工作，但目前DIV位于左上角。

如何让DIV显示在我刚刚选择的按钮上而不是左上角？

<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css">
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<style type="text/css">
.message_cont {
    position: fixed;
    width:150px;
}

.message_cont div {
    padding: 5px;
    background: #00C000;
    color: #fff;
    font-size: 16px;
}

</style>
<script  type="text/javascript">
    $(document).ready(function() {
$('button').click(function() {
    $messageCont = $('<div class="message_cont">');
    $message = $('<div>DONE</div>').hide();
    $messageCont.append($message);
    $('body').prepend($messageCont);
    $message.fadeIn(400, function() {
        setTimeout(function(){
            $messageCont.fadeOut();
            //code to clean up container
        }, 1500)
    })
 })
});
</script>
</head>
<body>


<button>Message</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam imperdiet purus dictum tincidunt. Phasellus a nisi et orci luctus venenatis. Vestibulum quis libero magna, nec gravida libero. Aliquam in accumsan erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lorem quam. Proin sodales pellentesque ligula, at mattis eros congue sit amet. Suspendisse potenti. Duis sit amet erat sapien, at dapibus neque. Vestibulum porta consequat massa luctus tempor. Nulla nunc lacus, varius non sollicitudin vitae, iaculis eget ipsum. In dictum, massa id cursus gravida, tellus urna porta quam, eget iaculis tortor est vehicula dui. Quisque ante turpis, pharetra in suscipit a, consectetur interdum dolor. Sed vitae enim libero, at semper velit. Nulla neque est, mattis ac feugiat vitae, ornare ut velit. Aliquam enim leo, ultrices in aliquet eget, dictum mattis sapien. Nam quam mauris, hendrerit vel bibendum sed, vulputate vitae ipsum. Quisque luctus sagittis suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button>Message</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam imperdiet purus dictum tincidunt. Phasellus a nisi et orci luctus venenatis. Vestibulum quis libero magna, nec gravida libero. Aliquam in accumsan erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lorem quam. Proin sodales pellentesque ligula, at mattis eros congue sit amet. Suspendisse potenti. Duis sit amet erat sapien, at dapibus neque. Vestibulum porta consequat massa luctus tempor. Nulla nunc lacus, varius non sollicitudin vitae, iaculis eget ipsum. In dictum, massa id cursus gravida, tellus urna porta quam, eget iaculis tortor est vehicula dui. Quisque ante turpis, pharetra in suscipit a, consectetur interdum dolor. Sed vitae enim libero, at semper velit. Nulla neque est, mattis ac feugiat vitae, ornare ut velit. Aliquam enim leo, ultrices in aliquet eget, dictum mattis sapien. Nam quam mauris, hendrerit vel bibendum sed, vulputate vitae ipsum. Quisque luctus sagittis suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

谢谢：）

Answer 1

如果我理解正确，你需要这个：

$messageCont.css({
    "left" : $(this).offset().left,
    "top" : $(this).offset().top
});

定位Div - Jquery Floater

1 个答案: