<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></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',    

c lassName:'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>