定位Div - jquery浮動

我使用這個，它的工作原理，但目前的DIV位於左上角。定位Div - jquery浮動

我該如何讓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>

謝謝:)

來源

2013-04-11 JeffVader

如果我理解正確的，你需要這樣的：

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

來源

2013-04-11 08:28:28 demshy

我在哪裏可以把這個？如果我添加它現有的jquery div仍然出現在左上角 – JeffVader 2013-04-11 08:50:21

把它放在$（'body'）之後。prepend（$ messageCont）; – demshy 2013-04-11 08:58:09

感謝這個工程，但只要你不向下滾動頁面。然後這一切都出錯了！有任何想法嗎？ – JeffVader 2013-04-11 10:08:16

定位Div - jquery浮動

回答

相關問題