Сегодня я расскажу, как создать всплывающее окно на jQuery, которое можно перетаскивать мышью, сворачивать, растягивать и, конечно, закрывать. ПРИМЕР
Итак, приступим к созданию такого окна.
Шаг 1.
Для начала нужно скачать и подключить к документу необходимые скрипты.
Code
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="interface.js"></script>
Шаг 2. Между тегами <head> или в отдельном CSS файле пропишем следующие стили для нашего окна:
Code
#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;
}
Шаг 3. Вставим ссылку, по которой будет открываться всплывающее окно, а затем непосредственно сам код блока окна.
Code
<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>
Шаг 4. Перед закрывающим тегом </body> вставим код скрипта:
Code
<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>
Готово!
Скачать
