Модальное окно
hhh,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> - jsFiddle demo by hhhh</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<style type='text/css'>
body{text-align:center}
.modal{position:fixed;top:50%;left:50%;z-index:1;display:none;margin:0 auto;margin-top:-100px;margin-left:-175px;width:350px;height:200px;background:#fff;border:3px solid #000;border-radius:3px;font-size:15px}
.modal-inner{display:table-cell;height:100%;vertical-align:middle;text-align:center;padding-top:30px}
.modal-inner input{margin-bottom:10px}
.modal-inner input[type=text]{display:inline-block;width:300px;height:30px;text-indent:10px}
.modal-inner input[type=submit]{display:inline-block;margin-top:10px;width:100px;height:25px;cursor:pointer}
button{margin-top:50px;padding:0;border:0;border-bottom:1px dashed #000;background:0;font-size:22px;cursor:pointer}
button:hover{border-bottom:1px dashed transparent}
#close{position:absolute;top:0;right:0;width:30px;height:30px;background:#000;color:#fff;cursor:pointer;text-align:center;font-size:15px;line-height:30px}
#bg-close{position:fixed;top:0;left:0;z-index:0;display:none;width:100%;height:100%;background:rgba(0,0,0,0.5);cursor:pointer}
</style>
<script>
$(function()
{
var divs =[{id: 'close', text: 'X', click: foo, appendTo: '.modal'},
{id: 'bg-close', click: foo, appendTo: 'body'}];
$.each(divs, function(indx, el)
{
$('<div/>', el)
}
);
function foo()
{
$('.modal')['fade' + (this.id? 'Out': 'In')](500);
$('#bg-close').css('display', this.id? 'none': 'block');
}
$('button').click(foo);
}
);
</script>
</head>
<body>
<div class="modal">
<div class="modal-inner">
<input type="text" value="Имя">
<input type="text" value="Телефон">
<input type="submit" value="Отправить">
</div>
</div>
<button>Заказать звонок</button>
</body>
</html>
|