web-touristДиалогов прозорец с jQuery
Автор: I_V_O
Здравейте туристи. В този урок ще ви покажа как да си направите диалогов прозорец само с няколко реда код, който можете да стилизирате и ползвате за много проекти. Пъровото нещо, от което се нуждаем е HTML структира за прозореца. Ще ползвам за урока максимално oпростена такава, което е напълно достатъчна в повечето случаи. Всеки може да я променя и усложнява според вкуса си. След това малко CSS и JS и имаме готов за употреба „лек“ диалогов прозорец. Отдолу можете да видите целия код за урока, в който под формата на коментари са всички обяснения. Така нещата според мен ще стават по-ясни като същевременно гледате кода и обясненията. Ще видите, че става само с няколко реда JavaScript и не е нищо сложно 🙂 Край на големите библиотеки за този ефект.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Dialog using jQuery</title>
<style>
/* Стилове за фоновия слой
* Ползваме фиксирана позиция и задаваме размери
* така, че да покирива цялата видима част и скриваме
* за начало елемента
*/
#overlay {
position: fixed;
top: 0px;
left: 0px;
width:100%;
height:100%;
display: none;
background: #ddd;
}
/* Силове за диалоговите прозорци
*
* Няма стил за сега
* стилизирайте по ваш вкус
*/
.dialog {
/* Позиционира елемента */
position: fixed;
top: 50%;
left: 50%;
z-index: 666;
/* Пробни стилове за урока */
width: 200px;
border: solid yellow 1px;
/* Скриваме елемента
* Показването ще бъде с JS
*/
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// УРОК СПЕЦИАЛНО И САМО ЗА WEB-TOURIST
// АВТОР: I_V_O
//
$(function(e){;
// Кешираме елементита, които ще използваме
// винаги го правете за добра производителност
// използваме най-бързите селектори за целта
var dialog = $('body>div.dialog');
var overlay = $('#overlay').css('opacity', '0.7');
// Добавя събитие click на бутона за затваеяне на прозореца
// използваме live събитие, което ще се изпълни за всички настощи и
// бъдещи елементи в страницата, отговарящи на посочения селектор
$('body>div.dialog a.close').live('click', function(e){
// Скрива фоновия слой и диалоговия прозорец
// Използвайте анимации ако решеите
overlay.hide();
// Ако елемента не е директен наследник на div.dialog
// може да се наложи да повторите няколко пъти .parent()
$(this).parent().remove();
});
// ИДЕИ:
// можете да скривате диалоговия прозорец и при натискане на
// фоновия слой по аналогичен начин :)
// Служи за създаване на нов диалогов прозорец
function getDialog(){
// Клонира елемента, центрира го и го добавя в
// HTML дървото като директен наследник на body,
// както и оригиналния елемент
// показва новия елемент с анимация
return dialog.clone().css({
top: ($(window).height()-dialog.height())/2 + 'px',
left: ($(window).width()-dialog.width())/2 + 'px'
}).appendTo(document.body).fadeIn(1000);
// ИДЕИ:
// Можете да задавате прозвлона позиция за показване
// на прозорците и да показвате няколко наведнъж :)
}
function showDialog(title, massage){
// Показва диалога и фоновия слой
var d = getDialog();
overlay.show();
// Добавя заглавие и съдържание на прозореца
$('.title', d).html(title);
$('.content', d).html(massage);
}
// Прост пример за използване на функциите
$('#show-dialog').click(function(e){
showDialog("Ето че имаме диалогов прозорец", "Със съдъжание от <b>HTML</b>!");
});
;});
</script>
</head>
<body>
<!-- Нека това бъде най-отгоре -->
<div id='overlay'></div>
<div class="dialog">
<a href="javascript:void(0);" title="close" class="close">[x]</a>
<h3 class="title"></h3>
<p class="content"></p>
</div>
<!-- Съдържание на сайта -->
<h1>Диалогов прозорец</h1>
<a href="javascript:void(0)" id="show-dialog">Покажи прозорец</a>
</body>
</html>Един урок специално и само за web-tourist.net
Ако имате въпроси и предложения пишете коментари. Мерси! :))))
