web-touristАлтернативи на alert,confirm и prompt
Автор: IzKuFeLiQqQqQ
Здравейте, тъй като ме дразни, че при 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>Давам ви свободата да променяте дизайна и функциите както си искате, само да знаете какво правите! 😀
При проблеми или въпроси ми пишете на ЛС или в форума :)!
Урока е авторски и забранявам копирането му в други сайтове без разрешението ми или това на администраторите!!!
