JQuery'deki bir bağlantıda bir açılır kutunun üzerine gelin nasıl yapılır?

Question

Jquery'de bir bağlantının üzerinde bir açılır pencerenin üzerine gelinmek nasıl yapılır?

<div id="floatbar"> 
    <a href="" onclick="make it float 10px under this yay"> 
</div> 

Answer 1

jquery

$("#floatbar").click(function(e){ 
    e.preventDefault(); 
    $(this).find(".popup").fadeIn("slow"); 
}); 

css

#floatbar { 
    position:relative; 
} 

.popup { 
    position:absolute; 
    top:10px; 
    left:0px; 
    height:30px; 
    background:#ccc; 
    display:none; 
} 

html

<a id="floatbar" href="#"> 
    <div class="popup">Hi there</div> 
    click here 
</a> 

Answer 2

Belki onun jQuery veya başka Işık Kutusu alternatif Fancybox gibi bir şey kullandığınızda daha kolay?

Answer 3

Saf css çözümü:

<div id="floatbar"> 
    <a href="" onclick="make it float 10px under this yay">Link</a> 
    <div class="box">Popup box</div> 
</div> 

.box { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 10px; 
    background: orange; 
    padding: 5px; 
    border: 1px solid black; 
} 

a:hover + .box { 
    display:block; 
} 

Yapmanız gereken tek şey bağlantı altında bir <div class="box">(popup text)</div> eklemek ve böyle bir kutuya sahip her bağlantı için çalışacaktır.

http://jsfiddle.net/mcdqt/