jQuery popout div à côté de l'élément de mon choix

Question

Je cherche une librairie jquery qui me permettra de créer une div pop out sous un élément de mon choix. Ce que je cherche est très similaire à the jquery ui date picker, mais il n'aura pas le sélecteur de date par défaut. Je veux être capable de mettre mon contenu dedans.

#popout popout sous #textbox

Answer 1

Cela fonctionne mais vous devez cliquer à nouveau dans la zone de texte pour le masquer. Bien que cela peut être réglé facilement:

<div id="divPop" style="z-index:500;position:absolute;display:none"> 
    Hello World! This is Popup Div. 
</div> 
<input id="txt" type="text" value="" width="200px" height="50px" 
    style="border:2px solid #ffeeee;color:#eeeeff;background-color:#aaeeaa"/> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#txt").popupDiv("#divPop"); 
    }); 
</script> 

---

jQuery.fn.popupDiv = function (divToPop) { 
    var pos=$(this).offset(); 
    var h=$(this).height(); 
    var w=$(this).width(); 

    $(divToPop).css({ left: pos.left + w + 10, top: pos.top + h + 10 }); 

    $(this).click(function(e) { 
     $(divToPop).css({ left: pos.left + w + 10, top: pos.top + h + 10 }); 
     if ($(divToPop).css('display') !== 'none') { 
      $(divToPop).hide(); 
     } 
     else { 
      $(divToPop).show(); 
     } 
    }); 
}; 

Answer 2

Vous pourriez main un rouleau comme ceci:

<div> 
    <span onclick="popout(this)">Click Here</span> 
    <div class="mypopout"></div> 
</div> 

function popout(ele) { 
    $(ele).next('.mypopout').html('some html'); 
    $(ele).next('.mypopout').toggle(); 
} 

Answer 3

C'est celui à utiliser: http://dev.iceburg.net/jquery/jqModal/

Très facile et beaucoup d'options.