<script type="text/javascript" src="jQuery.js"></script>

<script type="text/javascript" src="interface.js"></script>

#window

  {

position: absolute;

left: 200px;

top: 100px;

width: 400px;

height: 300px;

overflow: hidden;

display: none;

}

#windowTop

{

height: 30px;

overflow: 30px;

background-image: url(images/window_top_end.png);

background-position: right top;

background-repeat: no-repeat;

position: relative;

overflow: hidden;

cursor: move;

}

#windowTopContent

{

margin-right: 13px;

background-image:url(images/window_top_start.png);

background-position:left top;

background-repeat: no-repeat;

overflow: hidden;

height: 30px;

line-height: 30px;

text-indent: 10px;

font-family:Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 14px;

color: #6caf00;

}

#windowMin

{

position: absolute;

right: 25px;

top: 10px;

cursor: pointer;

}

#windowMax

{

position: absolute;

right: 25px;

top: 10px;

cursor: pointer;

display: none;

}

#windowClose

{

position: absolute;

right: 10px;

top: 10px;

cursor: pointer;

}

#windowBottom

{

position: relative;

height: 270px;

background-image: url(images/window_bottom_end.png);

background-position: right bottom;

background-repeat: no-repeat;

}

#windowBottomContent

{

position: relative;

height: 270px;

background-image: url(images/window_bottom_start.png);

background-position: left bottom;

background-repeat: no-repeat;

margin-right: 13px;

}

#windowResize

{

position: absolute;

right: 3px;

bottom: 5px;

cursor: se-resize;

}

#windowContent

{

position:absolute;

top: 30px;

left: 10px;

width: auto;

height: auto;

overflow: auto;

margin-right: 10px;

border: 1px solid #6caf00;

height: 255px;

width: 375px;

font-family:Arial, Helvetica, sans-serif;

font-size: 11px;

background-color: #fff;

}

#windowContent *

{

margin: 10px;

}

.transferer2

{

border: 1px solid #6BAF04;

background-color: #B4F155;

filter:alpha(opacity=30);  

-moz-opacity: 0.3;  

opacity: 0.3;

}

<a href="" id="windowOpen">Открыть всплывающее окно</a>

  <div id="window">

<div id="windowTop">

<div id="windowTopContent">Название окна</div>

<img src="images/window_min.jpg" id="windowMin" />

<img src="images/window_max.jpg" id="windowMax" />

<img src="images/window_close.jpg" id="windowClose" />

</div>

<div id="windowBottom"><div id="windowBottomContent"> </div></div>

<div id="windowContent"><p>Содержание всплывающего окна</p></div>

  <img src="images/window_resize.gif" id="windowResize" /></div>

<script type="text/javascript">

  $(document).ready(

function()

{

$('#windowOpen').bind(

'click',

function() {

if($('#window').css('display') == 'none') {

$(this).TransferTo(

{

to:'window',

className:'transferer2',  

duration: 400,

complete: function()

{

$('#window').show();

}

}

);

}

this.blur();

return false;

}

);

$('#windowClose').bind(

'click',

function()

{

$('#window').TransferTo(

{

to:'windowOpen',

className:'transferer2',  

duration: 400

}

).hide();

}

);

$('#windowMin').bind(

'click',

function()

{

$('#windowContent').SlideToggleUp(300);

$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);

$('#window').animate({height:40},300).get(0).isMinimized = true;

$(this).hide();

$('#windowResize').hide();

$('#windowMax').show();

}

);

$('#windowMax').bind(

'click',

function()

{

var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));

$('#windowContent').SlideToggleUp(300);

$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);

$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;

$(this).hide();

$('#windowMin, #windowResize').show();

}

);

$('#window').Resizable(

{

minWidth: 200,

minHeight: 60,

maxWidth: 700,

maxHeight: 400,

dragHandle: '#windowTop',

handlers: {

se: '#windowResize'

},

onResize : function(size, position) {

$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');

var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');

if (!document.getElementById('window').isMinimized) {

windowContentEl.css('height', size.height - 48 + 'px');

}

}

}

);

}

);

</script>