Главная » Эффекты для сайта » Как сделать всплывающее окно на сайте

Как сделать всплывающее окно на сайте

2015-08-19 / Вр:12:42 / просмотров: 4926

Привет, посетитель и читатель моего блога BlogGood.ru!

Если вам нужно сделать на сайте всплывающую форму обратной связи, заказа звонка и т.д., то у меня есть готовый код такого всплывающего окна, с помощью которого вы сможете реализовать вышеупомянутые функции.

Итак, чтобы сделать всплывающее окно на сайте, добавьте вот этот HTML код между тегами <body></body>:

<div id="Wrapp" style="display:none">
<div id='tt'>
<div class="close" onclick="openbox('Wrapp')">x</div>
Здесь может быть тест, форма, видео  
</div>
</div>
<a href="#" onclick="openbox('Wrapp');return false;" >Открыть</a>
</body>

Далее между тегами <head></head> вставьте вот этот javascript код:

<script ENGINE="text/javascript">
function openbox(id,tt) {
var div = document.getElementById(id);
var tt_div = document.getElementById(tt);
if(div.style.display == 'block') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
</script>

И в завершение нужно добавить CSS стиль:

body {
margin:0;
width:100%;
height:100%;
}
#Wrapp {
top:0;
left:0;
position:fixed;
background-color:#000;
opacity: 0.74;
width:100%;
height:100%;
z-index:10000;
}
#tt {
position:relative;
background-color:#fff;
width:200px;
height:100px;
padding:12px;
margin:20% auto auto auto;
border:red solid 1px;
}
div.close {
cursor:pointer;
position:absolute;
font-weight:700;
text-shadow:#000 1px 1px 0;
color:red;
right:7px;
top:2px;
}

Внимание! Вы можете:

- уменьшить прозрачность затемнения (Строка №11)

 opacity: 0.74;

- указать ширину и высоту всплывающего окна (Строка №19 и Строка №20)

width:200px;
height:100px;

- поднять всплывающее окно (№22)

margin:20% auto auto auto;

например, вот так:

margin:1% auto auto auto;

Вот, что получится в результате:

[посмотреть результат]

Если посидеть и поэкспериментировать со стилями, то можно сотворить что-то интересненькое.

<html>
<head>
<title> Как сделать всплывающее окно на сайте </title>
<script type="text/javascript">
function openbox(id,tt2) {
var div = document.getElementById(id);
var tt_div = document.getElementById(tt2);
if(div.style.display == 'block') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
</script>

<style>
body {}
#Wrapp2 {
top:0;
left:0;
position:fixed;
background-color:#fdc8be;
opacity: 0.95;
width:100%;
height:100%;
z-index:10000;
}
#tt2 {
position:relative;
background-color:#fff;
width:30%;
padding:12px;
height:auto;
margin:5% auto auto auto;
border:red solid 1px;
border-radius: 10px;
font-size: 16px;
color: #000;
}
div.close2 {
cursor:pointer;
position:absolute;
font-weight:700;
color:red;
right:7px;
top:2px;
z-index:10000;
font-size: 20px;
padding:0px;
}
</style>
</head>
<body>
<div id="Wrapp2" style="display:none">
<div id='tt2'>
<div class="close2" onclick="openbox('Wrapp2')">x</div>
<center>
<h2>Форма обратной связи.</h2>
<form name="MyForm" action="" method="post">
Ваше имя*
<input class="input" name="name" type="text"/> 
Электронная почта*
<input class="input" name="email" type="text" /> 
Тема сообщения
<input class="input" name="sub" type="text"/> 
Текст сообщения:
<textarea name="body" cols="50" rows="5" /></textarea>
<input id="submit" value="Отправить" type="submit" />
</form>
</center>
</div>
</div>
<a href="#" onclick="openbox('Wrapp2');return false;">Написать письмо</a> 
</body>
</html>

[посмотреть результат]