Jquery MSN Window

Open a Window like MSN Messenger when click a button

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> 
<div id="dialog" title="New Message!" >Hi, How are you?</div>
<button type="button">Show Dialog</button>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat dolor vulputate dui dignissim pretium bibendum tellus molestie. Nunc consequat tellus quam, eu dictum elit. Donec eget magna a dui fermentum venenatis nec adipiscing est. Proin enim mauris, tincidunt in aliquet sit amet, cursus nec elit. Morbi dignissim lobortis pulvinar. Duis a varius felis. Nunc quis ligula ut sapien sollicitudin elementum. Cras eget metus nisi, molestie tincidunt sem. Duis molestie, tortor ac viverra sagittis, lorem est molestie massa, vel molestie nulla massa at mauris. Mauris rutrum leo et erat ultrices ultrices. Quisque non est nec urna posuere luctus sit amet ac diam. Vestibulum sed neque metus, ac pharetra erat. Cras non adipiscing neque. Donec consectetur nisl in lorem lacinia tincidunt elementum nulla tempor.
</p><br />
<p>
Fusce et venenatis nisl. Vestibulum sodales bibendum velit, dignissim consectetur lorem rhoncus sed. Aenean lorem eros, eleifend at gravida nec, placerat sit amet urna. Vivamus ut dolor at dolor mollis convallis eu non nibh. Ut tincidunt diam sit amet enim placerat sagittis. Proin et iaculis risus. Maecenas enim mauris, posuere sit amet blandit ut, euismod in mi.
</p><br />
<p>
Sed molestie viverra quam, et dignissim enim condimentum non. Donec in turpis nunc, et malesuada dolor. Nullam molestie, erat sit amet blandit commodo, nibh nulla dignissim tellus, non semper tellus neque et odio. Aliquam erat volutpat. Praesent at orci nunc, adipiscing suscipit orci. Duis pharetra hendrerit lectus, id malesuada tortor pulvinar ac. In hac habitasse platea dictumst. Nulla facilisi. Nulla porttitor, nibh vel ornare condimentum,...

CSS

#dialog {
        display:none;
        font-family: Arial,sans-serif;
        font-size: 13px;
        color: #333;
        line-height: 130%;
}

#ui-dialog-title-dialog {
        font-family: Arial,sans-serif;
        font-size: 14px;
}

JavaScript

$("#dialog").dialog({
    height: 'auto',
    width: 200,
    draggable: false,
    position: ['right', 'bottom'],
    autoOpen: false,
    resizable: false,
    show: {
        effect: 'drop',
        direction: 'up',
        duration: 700
    }
});
$(':button').click(function() {
    $('#dialog').dialog("close").dialog('open');
});

$(window).scroll(function() {
    if ($('#dialog').is(':hidden') == false) {
        $("#dialog").dialog({
            position: ['right', 'bottom']
        });
    }
});

$(window).resize(function() {
    if ($('#dialog').is(':hidden') == false) {
        $("#dialog").dialog({
            position: ['right', 'bottom']
        });
    }
});