BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Привет, посетитель и читатель моего блога 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 type="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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Как сделать всплывающее окно на сайте

  1. Тимофей

    Симпатично! А я как раз по этой теме Вам письмо написал. Всё тоже самое пытался с FancyBox сделать. Неудачно

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо! Теперь все получиться!

    Ответить

  2. Людмила Лао

    Нажала посмотреть результат, а там какие-то кракозябры выскочили…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Все исправил! Спасибо, что сказали!

    Ответить

  3. Алена

    Добрый вечер!
    Подскажи, пожалуйста, если знаешь, как осуществить то же самое, только выбирать элементы не по ID, а по классу.
    Просто у меня на странице несколько элементов, которые нужно открывать по клику, и они выводятся динамически в цикле WordPress. Соответственно если я им всем задаю один ID, при клике на любой элемент, в окне выводится содержимое только первого из них…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Алена. Задайте в цикле счетчик, чтобы значение увеличивалась на 1. Таким образом у Вас буде уникальное ID
    Например:

    <div id="Wrapp1" style="display:none">
    <div id="Wrapp2" style="display:none">
    <div id="Wrapp3" style="display:none">
    <div id="Wrapp4" style="display:none">
    

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 788
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4419