How to load iframe on top of content in a neat sticky window with jquery

Question

Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php

I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.

Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.

I use the jquery framework, but Im not that proficient at it. Site is written in php.

What I was thinking is this

I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.

Answer 1

<style type="text/css">
#chatFrame {
    display: none;
    width: 300px;
    height: 200px;
    /* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {

    $('#activator').click(function() {

        $('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
    });
});
</script>

<a href="javascript:void(0);" id="activator">open chat</a>
<div id="chatFrame"></div>

Answer 2

A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

I like PrettyPhoto for it's simple look and so far I had no problem with it.

The code can be as simple as this :

<a href="http://www.google.com?iframe=true&amp;width=100%&amp;height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

The website has all the details.