CODEWITHSUNDEEP
jquerycss
pufAmuf
pufAmuf

Reputation: 7805

Position a div outside a modal /relative to its position?

I've been doing some reading about appending a div to other objects. What I want to do is put a logo on top of a modal box (outside of it), and make it move as the modal changes height. However, I am stuck as to how I would style that to always follow the dynamic modal.

This is what I've got so far:

$(#mydiv).appendTo("#cboxContent");

What I understand is that this connects them somehow, I've looked up css and jquery and they all seem to do this where both divs are inside a wrapper, however I don't think that applies here. Thanks :)

Not working demo

Added this to the tag.

$(#facebooklike).appendTo("#cboxContent");

Added this to #facebooklike:

position:absolute;
left:-100px;
top:-100px;

Working demo

http://nightlifebratislava.com/demos/like/style/colorbox.css

http://nightlifebratislava.com/demos/like/js/jquery.colorbox.js

This is the link to the modal:

<a class='modal1' href="file2.html">Colorbox</a>

And below that I have the facebook floating div:

<div id="facebooklike" class="facebooklike">
    <div class="facebookinner">facebook div
</div></div>

Upvotes: 0

Views: 838

Answers (1)

Andy
Andy

Reputation: 30135

your code, although it should be $('#mydiv'), positions the div inside #cboxContent. you could now set the css to:

#mydiv{
    position:absolute;
    left:-100px;
    top:-100px;
}

for example.

this should display it outside of cboxContent. you'll have to adjust the left and top to fit your needs. also make sure the cboxContent has overflow:visible;

Upvotes: 2

Related Questions