JQuery popout div next to an item of my choice

Question

I am looking for a jquery library that will allow me to create a dropdown div under an element of my choice. What I'm looking for is very similar to jquery ui date picker , but by default there will be no date picker . I want me to be able to post my content on it.

popout #popout in #textbox

Answer 1

This works, but you need to click the text box again to hide it. Although this can be easily sorted:

<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

You can execute the roll command as follows:

 <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

This is the one to use: http://dev.iceburg.net/jquery/jqModal/

Very simple and many options.