Алтернативи на alert,confirm и prompt
15-09-2011
Здравейте, тъй като ме дразни, че при JS функциите alert,confirm и prompt не може да се в други табове и да се копира линка от адрес бара и т.н. , реших да си направя собствени с по-хубав дизайн.Ето какво се получи след около час писане(бавно пишех щотo ме мързеше :D)

functions.js

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

function alertit(header, content) { //алтернатива на alert()

function close_alertit() {
$("#alertit_windown,#functions_bg").fadeOut("medium", function() {
$("#alertit_windown,#functions_bg").remove();

});
}
$(window).keyup(function(e) {
if (e.keyCode == 27) {
close_alertit();
}
});
if ($('#alertit_windown').length) {
$("#alertit_windown").remove();
}
$('body').append("<div id='functions_bg'></div><div id='alertit_windown'><div id='alertit_header'>" + header + "<img src='http://cdn2.iconfinder.com/data/icons/gnomeicontheme/22x22/actions/window-close.png' alt='Затвори' style='float:right;' id='alertit_close'/></div><div id='alertit_content'>" + content + "<div><center><input type='button' id='alertit_ok' value='Ок!'/></center></div></div></div>");
var functions_bgHeight = $(document).height();
var functions_bgWidth = $(window).width();
$('#functions_bg').css({
'width': functions_bgWidth,
'height': functions_bgHeight
});
$('#functions_bg').fadeTo("slow", 0.6);
$('#alertit_windown').fadeIn('medium');
$('#alertit_close,#alertit_ok').click(function() {
close_alertit();
});
}
//---------------------------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------------------------------------------------------------------------------------------------//

function confirmit(header, content, callback) { //Алтернатива на confirm()

function close_confirmit() {
$("#confirmit_windown,#functions_bg").fadeOut("medium", function() {
$("#confirmit_windown,#functions_bg").remove();
});
}
$(window).keyup(function(e) {
if (e.keyCode == 27) {
if (callback) {
callback(false);
}
close_confirmit();
}
});
if ($('#confirmit_windown').length) {
$("#confirmit_windown").remove();
}
$('body').append("<div id='functions_bg'></div><div id='confirmit_windown'><div id='confirmit_header'>" + header + "<img src='http://cdn2.iconfinder.com/data/icons/gnomeicontheme/22x22/actions/window-close.png' alt='Затвори' style='float:right;' id='confirmit_close'/></div><div id='confirmit_content'>" + content + "<br /><div style='float:right;'><input type='button' id='confirmit_submit' value='Ок'/><input type='button' id='comfirm_cancel' value='Откажи'/></div></div></div>");
$('#confirmit_windown').fadeIn('medium');
var functions_bgHeight = $(document).height();
var functions_bgWidth = $(window).width();
$('#functions_bg').css({
'width': functions_bgWidth,
'height': functions_bgHeight
});
$('#functions_bg').fadeTo("slow", 0.6);
$('#confirmit_submit').click(function() {
close_confirmit();

callback(true);

});

$('#comfirm_cancel,#confirmit_close').click(function() {
close_confirmit();
if (callback) {
callback(false);
}
});
}

//---------------------------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------------------------------------------------------------------------------------------------//

function promptit(header, content, value, callback) { //Алтернатива на prompt()

function close_promptit() {
$("#promptit_windown,#functions_bg").fadeOut("medium", function() {
$("#promptit_windown,#functions_bg").remove();
});
}
$(window).keyup(function(e) {
if (e.keyCode == 27) {
if (callback) {
callback(false);
}
close_promptit();
}
});
if ($('#promptit_windown').length) {
$("#promptit_windown").remove();
}
$('body').append("<div id='functions_bg'></div><div id='promptit_windown'><div id='promptit_header'>" + header + "<img src='http://cdn2.iconfinder.com/data/icons/gnomeicontheme/22x22/actions/window-close.png' alt='Затвори' style='float:right;' id='promptit_close'/></div><div id='promptit_content'>" + content + "<br /><input type='text' id='promptit_textarea'/><br /><div style='float:right;'><input type='button' id='promptit_submit' value='Ок'/><input type='button' id='comfirm_cancel' value='Откажи'/></div></div></div>");
$('#promptit_textarea').val(value);
$('#promptit_windown').fadeIn('medium');
$('#promptit_textarea').focus().select();
var functions_bgHeight = $(document).height();
var functions_bgWidth = $(window).width();
$('#functions_bg').css({
'width': functions_bgWidth,
'height': functions_bgHeight
});
$('#functions_bg').fadeTo("slow", 0.6);
$('#promptit_submit').click(function() {
if (callback) {
callback($('#promptit_textarea').val());
}
close_promptit();
});

$('#comfirm_cancel,#promptit_close').click(function() {
if (callback) {
callback(false);
}
close_promptit();
});
}
console.log('confirm,alert,prompt loaded!');


style.css

html,body {margin:0 auto;padding:0;}

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


#promptit_windown,#alertit_windown,#confirmit_windown {
background-color:lightgreen;
border:1px solid black;
height:auto;
width:400px;
position:absolute;
z-index:100;
top:35%;
left:35%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:none;
}
#promptit_header,#alertit_header,#confirmit_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;
}
#promptit_content,#alertit_content,#confirmit_content {
padding:3px 3px 3px 3px;
height:100%;
}
#promptit_close:hover,#alertit_close:hover,#confirmit_close:hover {
background-color: rgba(255, 255, 255, 0.7);
cursor: default;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#promptit_textarea {
width:99%;
}


example.html

<!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>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<script>
$(function() {
$('#click').click(function() {
promptit("Примерно заглавие!", "Примерен prompt!","Примерна стойност",function(r) {
if(r) {$('#result').html("Въведе: "+r);}
else $('#result').html('Натисна "Откажи" или затвори прозореца, не си въвел стойност!');
});
});

$('#click1').click(function() {
alertit("Примерно заглавие!", "Примерен alert!");
});

$('#click2').click(function() {
confirmit("Примерно заглавие!", "Примерен confirm!",function(r) {
if(r) {$('#result').html('Натисна Ок');}
else {$('#result').html('Натисна "Откажи" или затвори прозореца!');}
});
});
});
</script>
<script src="functions.js" type="text/javascript"></script>
</head>
<body>
<div id="click">Натисни ме!</div>
<div id="click1">Натисни и мен!</div>
<div id="click2">Натисни и менеее!</div>
<br /><br />
<div id="result"></div>
</body>
</html>


Демо
Резервно демо

Файловете от урока
Резервен линк 1
Резервен линк 2

Давам ви свободата да променяте дизайна и функциите както си искате, само да знаете какво правите! :D

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

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




/ Трябва да сте регистриран за да напишете коментар /
От: admin
23:40 15-09-2011
Rar файлове ги качи в личната си папка.
Резервен линк ок на друго място.
Но основния трябва да е в личната ти папка.
От: IzKuFeLiQqQqQ
14:26 16-09-2011
Ох верно бях забравил :X ама преди малко го редактирах и сложих :)
От: kriss
14:44 20-09-2011
Добрее :)
Не се бях сещал за такъв вариянт.. Малко ми е безсмислено, освен че може да се променя дизайна, ама.. Браво за труда.
От: IzKuFeLiQqQqQ
16:11 20-09-2011
Е ама така можеш си ги манипулираш както си искаш... само да знаеш какво правиш де :D
1