Привет, посетитель и читатель моего блога 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>
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222518 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187688 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
6 Ответов на комментарий - Как сделать всплывающее окно на сайте
Добавить комментарий
Метки: Вебмастеру, для сайта
Симпатично! А я как раз по этой теме Вам письмо написал. Всё тоже самое пытался с FancyBox сделать. Неудачно
Нажала посмотреть результат, а там какие-то кракозябры выскочили…
Спасибо! Теперь все получиться!
Все исправил! Спасибо, что сказали!
Добрый вечер!
Подскажи, пожалуйста, если знаешь, как осуществить то же самое, только выбирать элементы не по ID, а по классу.
Просто у меня на странице несколько элементов, которые нужно открывать по клику, и они выводятся динамически в цикле WordPress. Соответственно если я им всем задаю один ID, при клике на любой элемент, в окне выводится содержимое только первого из них…
Здравствуйте, Алена. Задайте в цикле счетчик, чтобы значение увеличивалась на 1. Таким образом у Вас буде уникальное ID
Например: