CODEWITHSUNDEEP
jquerypopup
Paul Knopf
Paul Knopf

Reputation: 9776

jQuery popout div next to element of my choice

I am looking for a jquery library that will let me create a pop out div under an element of my choice. What I am looking for is very similar to the jquery ui date picker, but it will not have the date picker by default. I want to be able to put my content into it.

popout #popout under #textbox

Upvotes: 3

Views: 11266

Answers (3)

Dan
Dan

Reputation: 266

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

Very easy and lots of options.

Upvotes: 0

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

This works but you have to click in the text-box again to hide it. Though this can be sorted out easily:

<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();
        }
    });
};

Upvotes: 9

Josh Pearce
Josh Pearce

Reputation: 3455

You could hand roll one like this:

<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();
}

Upvotes: 1

Related Questions