Алтернативи на alert,confirm и prompt v2

Автор: IzKuFeLiQqQqQ

Здравейте, ще ви покажа втората версия за създаване на алтернативни функции съответстващи на JavaScript функциите alert, confirm и prompt. В предната версия кода беше твърде много и твърде тежък и без много екстри и имаше бъгове. Затова реших да направя този по кратък, оптимизиран, функционален и подреден код! За новия код съм взел дизайна и част от кода тъй като нямаше смисъл да започвам от нулата :).

jQcustom.js

// Втора версия за алтернативни alert,prompt и confirm функции
// Създател: Пламен Добрев (nicks:IzKuFeLiQqQqQ,plamba95)
// Програмни езици: jQuery v.1.7.1,CSS3,HTML5
// Дата: 14.03.2012
// Всички права запазени!
// Информация: Библиотека на jQuery е задължителна!!! Може да я изтеглите от http://jquery.com/ !

function jqcustom(content, data, callback) {
var i = $('.jqcustom_windown').length;
if ($('.jqcustom_windown#jqwin' + i).is(':visible')) {
i++;
}

var def_data = {
'type': 'alert',//дали функцията ще е аналогична на alert/prompt/confirm (при липса на type по подразбиране е alert
'title': 'Съобщение от сайта!',//текста в header-a на "диалоговия прозорец"
'ok': 'Ок',//текста в бутона за 'ок'
'cancel': 'Отказ',//текста в бутона за 'отказ'
'value': ''//начална стойност на input полето при prompt
};

if (data) {
for (var val in def_data) {
if (typeof data[val] == "undefined") data[val] = def_data[val];
}
}
else {
var data=[];
for (var val in def_data) {
data[val] = def_data[val];
}
}

var output = "";
output += "<div class='jqcustom_mask' id='jqmask" + i + "'></div><div class='jqcustom_windown' id='jqwin" + i + "'>";
output += "<div class='jqcustom_header'>" + data['title'] + "<img src='http://cdn2.iconfinder.com/data/icons/gnomeicontheme/22x22/actions/window-close.png' alt='Затвори' style='float:right;' class='jqcustom_close'/></div>";
output += "<div class='jqcustom_content'>" + content + "<div>";
if (data['type'] == 'prompt') output += "<input type='text' class='jqcustom_textarea' value='" + data['value'] + "'/><br />";
output += "<center><input type='button' class='jqcustom_ok' value='" + data['ok'] + "'/>";
if (data['type'] == 'confirm' || data['type'] == 'prompt') output += "<input type='button' class='jqcustom_cancel' value='" + data['cancel'] + "'/>";
output += "</center></div></div></div>";
$('body').append(output);

if (data['type'] == 'prompt') {
$('.jqcustom_windown#jqwin' + i).find('.jqcustom_textarea').focus().select();
}

function jqcustom_center() {
$('.jqcustom_mask#jqmask' + i).css({
'width': $(window).width(),
'height': $(window).height()
});
$('.jqcustom_windown#jqwin' + i).css({
'left': ($(window).width() - $('.jqcustom_windown#jqwin' + i).width()) / 2 + $(window).scrollLeft() + "px",
'top': ($(window).height() - $('.jqcustom_windown#jqwin' + i).height()) / 2 + $(window).scrollTop() + "px"
});
}
$(window).ready(jqcustom_center).resize(jqcustom_center).scroll(jqcustom_center);

$('.jqcustom_mask#jqmask' + i).fadeTo("slow", 0.6);
$('.jqcustom_windown#jqwin' + i).fadeIn('medium');

function jqcustom_close() {
$(".jqcustom_windown#jqwin" + i + ",.jqcustom_mask#jqmask" + i).fadeOut("medium", function() {
$(".jqcustom_windown#jqwin" + i + ",.jqcustom_mask#jqmask" + i).remove();
});
}

function jqcustom_ok() {
if (callback) {
if (data['type'] == 'alert' || data['type'] == 'confirm') callback(true);
else if (data['type'] == 'prompt') callback($('.jqcustom_textarea').val());
}
jqcustom_close();
}

$(document).one('keyup',function(e) {
if (e.keyCode == 27) {
if (callback) {
callback(false);
}
jqcustom_close();
}
else if (e.keyCode == 13) {
jqcustom_ok();
}
});

$('.jqcustom_windown#jqwin' + i).find(".jqcustom_close,.jqcustom_cancel,.jqcustom_mask#jqmask" + i).click(function() {
if (callback) {
callback(false);
}
jqcustom_close();
});

$('.jqcustom_windown#jqwin' + i).find('.jqcustom_ok').click(function() {
jqcustom_ok();
});
}

jQcustom.css

.jqcustom_mask {
position:absolute;
left:0;
top:0;
z-index:10;
background-color:#000000;
display:none;
}

.jqcustom_windown{
background-color:lightgreen;
border:1px solid black;
height:auto;
width:400px;
position:absolute;
z-index:100;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:none;
}

.jqcustom_header {
background-color:lightblue;
padding:3px 3px 3px 3px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}

.jqcustom_content{
padding:3px 3px 3px 3px;
height:100%;
}

.jqcustom_close:hover {
background-color: rgba(255, 255, 255, 0.7);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.jqcustom_textarea {
width:99%;
}

Примерна страница

<!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>Алтернативни alert,prompt и confirm функции</title>
<link rel='stylesheet' href='jQcustom.css' type='text/css' media='all'/>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jQcustom.js" type="text/javascript"></script>

<script>
$(function() {
$('#alert').click(function() {
jqcustom('alert',{'title' : 'alert it','ok' : 'дообре'});
return false;
});

$('#confirm').click(function() {
jqcustom('confirm',{'type' : 'confirm','title' : 'confirm it','ok' : 'съгласих са'},function(r) {
if(r) $('#result').html('Натисна Ок');
else $('#result').html('Натисна "Откажи" или затвори прозореца!');
});
return false;
});

$('#prompt').click(function() {
jqcustom('prompt that thing',{'type' : 'prompt','value' : 'test','title' : 'prompt it','ok' : 'както кажиш','cancel' : 'а не'},function(r) {
if(r) $('#result').html("Въведе: "+r);
else $('#result').html('Натисна "Откажи" или затвори прозореца, не си въвел стойност!');
});
return false;
});

$('#promptalert').click(function() {
jqcustom('prompt that with alert',{'type' : 'prompt','value' : 'test with alert','title' : 'prompt it'},function(r) {
if(r) {
jqcustom(r,{'title' : 'В полето въведохте'},function(ree) {$('#result').html("И alert е затворен");});
}
else $('#result').html('Натисна "Откажи" или затвори прозореца, не си въвел стойност!');
});
return false;
});
});
</script>

</head>
<body>
<div id="alert">alert</div>
<div id="confirm">confirm</div>
<div id="prompt">prompt</div>
<div id="promptalert">prompt and alert</div>
<br /><br />
<div id="result"></div>
</body>
</html>

Надявам се скрипта да ви хареса 🙂 Давам ви свободата да променяте дизайна и функциите както си искате, само да знаете какво правите! 😀

При проблеми или въпроси ми пишете на ЛС или в форума :)!

Урока е авторски и забранявам копирането му в други сайтове без разрешението ми или това на администраторите!!!