В днешния урок ще си поговорим за това как бързо и лесно посредством jQuery да създадем приятнo изглеждаща кутийка, носеща послание до потребителите или иначе казано Dialog Box/Message Box/Modal Box. Не го обвързвам с име, защото по принцип могат да му се намерят много приложения.
За самия урок съм избрал варианта, в който ползваме кутийката като предупреждение за възрастта, т.е. подходяща е за сайтове със съдържание за възрастни. Вие може да решите да я ползвате за нещо съвсем друго, като например банер, логин и т.н.
| View DemoDownload |
В духа на конкретния пример нека приемем, че имате сайт, който съдържа материали неподходящи за лица под 18 години и по някакъв начин искате да се презастраховате, като поставите вход за потребители, който съдържа предупредително съобщение, текст с евентуалните последствия, условия за ползване и т.н. Обикновено този тип предупредителни съобщения се изобразяват чрез статична и грозна страница, но днес ще направим нещата малко по-красиви и съвременни. Както всички уроци по сайта и този ще бъде максимално опростен. На някои хора, които са наясно с материята може да не им се стори най-доброто решение, но според мен е перфектно за начинаещи потребители.
HTML
Тук имаме един празен div с id="blackbg", който представлява черният фон при пускането на бокса. Самата кутия (#warningbox) не е в него, тъй като и двата елемента ползват прозрачност и това предизвиква известни проблеми. Нещата се усложняват излишно, а за едно простичко съобщение, каквото е това просто не си струва и точно поради тази причина, кутията е в отделен елемент, който е позициониран върху черния фон.
Виждате и че, за да добиете представа как работи всичко, съм създал няколко изключително прости страници, към които водят бутоните.
Държа да отбележа, че най-оптималният вариант за ползване на сорса по-долу е като той се зарежда от външно файлче, тъй като се ползва рядко и не е нужно да стои по разни index-и.
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/dialog-box.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <title>Dialog Box с jQuery</title> </head> <body> <div id="blackbg"></div> <div id="warningbox"> <h2>Сайтът съдържа материали неподходящи за лица под 18 години!</h2> <p class="info">Някакво съобщение със предупредително-съмнителен текст, което да хвърли в размисъл младите и непорочни дечица!</p> <table cellspacing="0" cellpadding="0" id="buttons"> <tr> <td><a href="hero.html" class="yes"><span>Съгласен</span></a></td> <td><a href="shube.html"><span>Тц</span></a></td> </tr> </table> </div> </body> </html>
CSS
Той в случая не е от особено значение, тъй като първо няма нищо специфично, на което да се обърне внимание и второ всеки може да си го модифицира, както реши за най-добре. Кликнете бутончето отдолу, за да видите кода. Оставил съм тук-там коментари, като например за сянката на box-a, която естествено не се вижда под Internet Explorer (6/7/8), така че го имайте впредвид, ако решите да си я запазите. Освен това за background на body съм сложил скрийншот от FridayCode за по-голяма достоверност и съм оставил височина 100%, тъй като IE6 реве.
body {
margin: 0;
padding: 0;
background: #fff url(../img/bg.png) no-repeat center top;
height: 100%; /* IE6 Fix */
}
a, a:link, a:visited { outline: none; text-decoration: none; }
.clr { clear: both; height: 0; line-height: 0; font-size: 0; }
#blackbg {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
filter:alpha(opacity=0);
z-index: 10;
background: #000;
}
#warningbox {
position: absolute;
top: 50%;
left: 50%;
width: 440px;
height: 190px;
margin: -129px 0 0 -250px;
padding: 30px;
opacity: 0;
filter:alpha(opacity=0);
z-index: 20;
background: #f5f4f1;
border: 4px solid #c4bfab;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
font-weight: 700;
text-align: center;
box-shadow: 3px 3px 5px #676767; /* Opera */
-moz-box-shadow: 3px 3px 5px #676767; /* Firefox */
-webkit-box-shadow: 3px 3px 5px #676767; /* Chrome / Safari */
}
#warningbox h2 {
width: 376px;
border-bottom: 1px solid #dcd9cf;
font-family: Arial, Tahoma, sans-serif;
font-size: 20px;
color: #c41c1c;
margin: 0 auto;
padding: 0 0 10px;
}
#warningbox p.info {
color: #757165;
font-size: 12px;
margin: 30px 0;
}
#buttons {
margin: 0 auto;
}
#buttons a {
float: left;
border: 1px solid #c4bfab;
background: #e6e4dc;
margin: 0 20px;
}
#buttons a:hover {
background: #d7d5cc;
}
#buttons a span {
float: left;
border: 1px solid #f5f4f1;
width: 106px;
height: 28px;
color: #747474;
font-size: 13px;
line-height: 28px;
cursor: pointer;
}
jQuery
Стигнахме и до най-значимата част от урока, където HTML-a и CSS-а "оживяват". Както бях написал в началото - той е подходящ за начинаещи и една от причините е, че ползва елементарни похвати, а и доста от нещата са коментирани в предишни уроци, така че би трябвало да са ви ясни.
Въпреки това има и нещо новичко, на което ще обърна по-голямо внимание и това е Cookie-то. За работа с кукита ползваме plugin-a за jQuery, който ако сте обърнали внимание заредихме в HTML-a по-горе. Идеята е при кликане на бутона за съгласие с условията от страна на потребителя, да направим така че да се записва cookie, което се пази известно време. Колко време да се пази е доста относително, защото ако говорим за adult сайт, то би било добре да се появява всеки път при влизане (тогава не ни е нужен expire), но ако става въпрос за реклама, тя може да се появява само веднъж на денонощие. Точно тук идва и работата на cookie-то, което помни за определен период от време, че вие сте се съгласили с условията (или сте видяли рекламата). Когато периодът изтече кукито се изтрива и потребителят ще вижда отново въпросния Dialog Box.
Останалата част от кода съм обяснил чрез коментарите, за да е по-нагледно, но ако имате допълнителни въпроси - питайте на воля!
jQuery(document).ready( function ()
{
if ($.cookie('age') == '18') { document.location = "hero.html"; } // Правим проверка дали съществува cookie с име 'age' и стойност '18' и ако има отиваме на посочената страница
else {
$('#blackbg').show().animate({opacity: '0.5' }, 400); // Показваме черния фон
$('#warningbox').animate({opacity: '1' }, 600); // Показваме Dialog Box-a
$('#buttons a').click(function(e){
e.preventDefault(); // "Блокираме" следването на URL-a при кликване на бутон
var button = $(this);
var button_href = button.attr('href'); // Взимаме стойността на атрибута href="" на кликнатия бутон
$('#blackbg').animate({opacity: "0"}, 600); // Скриваме черния фон
$('#warningbox').animate({opacity: "0"}, 600, function(){ // Скриваме Dialog Box-a
if ( button.hasClass('yes') ) { $.cookie('age', '18', { expires: 1 }); } // Слагаме cookie, когато бутонът за съгласие бива кликнат
document.location = button_href; // Подаваме стойността на атрибута href="", която бяхме взели по-горе и отиваме на въпросната страница
});
});
}
});
Предполагам след като сте разгледали кода имате поне два въпроса, а и да нямате, аз ще си отговоря.
Какво прави hero.html и скриптът в нея?
В страницата hero.html, към която води бутонът "Съгласен" ще забележите малко jQuery код, който е сложен само заради самата демонстрация (както и самата страница) и просто изтрива cookie-то, връщайки ви на началния пейдж. Ако не го изтриваше, то всеки път, когато се опитвате да влезете на въпросната начална страница, скриптът директно ще ви препраща в hero.html, така че пак казвам - кодът е сложен само заради демонстрацията на сайта и дали ще го ползвате впоследствие е ваш избор.
Защо ни е да блокираме нормалната функционалност на линка?
Предполагам сте обърнали внимание на реда, който блокира следването на URL при клик. Всъщност идеята на този Dialog Box е да се появи плавно и по същия начин да изчезне когато кликнете някой от бутоните. ОК, но след като кликнете на бутон, браузърът ви веднага започва да отваря новата страница и така анимацията на скриване бива прекъсната. Ето защо с малко допълнителен код правим така, че едва след като черният фон и кутийката ги няма, скриптът да ни препрати към желания пейдж.
Надявам се урокът да е бил полезен, да сте научили нещо ново или поне да съм засилил желанието ви да го направите. Приложенията на този Dialog Box са наистина много и ще се радвам да видя някое от тях в действие. Експериментирайте!
Изглежда яко.Чудя се дали ще мога да го сложа в имидж форума си :D
Урока е страхотен точно търсех как се прави такава такъв Dialog Box.
А това прозорче как може да се пригоди за бгтоп например ?
Здравейте,
Колеги бихте ли казали как може дива #warningbox да се скрива при настискане на бутона "затвори" освен с opacity 0 ?
Въпросния dialog box го използвам за логин и искам, след натискане на бутона затвори той наистина да се премахва. В момента като е opacity той става невидим под другите елементи и все едно го няма, но ако отгоре имаме текст (както е при мене). той не може да се селектва.
Пробвах с $('#warningbox').css('display', 'none'); и с $("#warningbox").hide(); и т.н, но не се получва.
Дайте идея как може да се скрива блока #warningbox
Благодаря!
@zeleno,пробва ли с <a href="javascript:winodow.close();">Дада</a>