T.M. SoftStudio

feci quod potui, faciant meliora potentes

JQuery: Диалоговые окна

 

Рассматривается пример создания диалогового окна с использованием JQuery, div-разметки и CSS-стилей.

 

Для создания диалогового окна в HTML-страницу добавим блок диалогового окна:

<div id="dialog_foto">

<img id="btn_close_foto" src="/img/btn_close_foto_up.jpg" alt="" class="btn" style="display:none;"/>

<div id="dialog_foto_content">

<iframe name="frame_foto" id="frame_foto" src="" scrolling="no"></iframe>

</div>

</div>

Также добавим блок маски в тэг <body>:

<div id="mask">

</div>

Определим CSS-стили:

#dialog_foto{

display:none;

text-align:right;

border-color:#972509;

border-width:2px;

border-style:solid;

position:absolute;

top:100px;

background-color:#ffffff;

z-index:200;

overflow:hidden;

width:1px;

}

#dialog_foto_content{

font-weight:bold;

color: #8B0000;

text-align:left;

}

#frame_foto{

border:none;

width:100%;

height:100%;

margin-right:0;

padding: 0;

overflow:hidden;

}

Изначально блок диалогового окна «dialog_foto» скрыт и отображается при клике на уменьшенном изображении:

$('.foto').click(function() {

var dialog = $('#dialog_foto');

var mask = $('#mask');

mask.show();

dialog.show();

$('#frame_foto').attr('src','…');

$('#frame_foto').load(function(){

var width=$('#frame_foto').contents().find('body').width();

if (width<500){

width=500;

}

dialog.css('width',width+50+'px');

this.style.height =

this.contentWindow.document.body.offsetHeight + 'px';

dialog.css('margin-left',($(window).width()-dialog.width())/2+'px');

$('#content').css('height',dialog.height());

mask.css({'opacity':'0.5','position':'absolute', 'left':'0','top':'0','background-color':'#000000','z-index':'100','width':$(window).width(),'height':$(document).height()});

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

});

});

При отображении блока «dialog_foto» эффект диалогового окна проявляется с помощью разнесения блока «dialog_foto» и блока «mask» по оси Z, где основной контент находится в начале координат, блок маски – имеет координату 100 по оси Z, а блок диалогового окна – координату 200 по оси Z.

 

Закрывается диалоговое окно с помощью кнопки Закрыть:

$(".btn").click(function() {

var id = $(this).attr('id');

if(id=='btn_close_foto'){

var dialog = $('#dialog_foto');

dialog.hide();

var mask = $('#mask');

mask.hide();

$('#content').css('height',content_height);

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

}

});