slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна3 / 5
 
Автор: Администратор
Просмотров: 19445
Теги: form, modal, window, всплывающее окно

В этой статье мы рассмотрим самый простой способ создания модального окна, с затемненным фоном, внутри которого будет форма обратной связи.

Для начала о файловой структуре:

  • index.html - основной файл разметки
  • css/template.css - файл стилей в специальной папке
  • js/popup.js - файл со скриптами нашего всплывающего окна

Так как мы используем библиотеку jQuery, не забываем подключить её в index.html.

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

Идея такая. Изначально у нас будет блок, который будет поверх всей страницы, внутри которого будет блок, отвечающий за затемненный фон и блок с самой формой обратной связи. Основной блок будет спрятан посредством display:none. При нажатии на кнопку показа формы обратной связи она будет плавно появляться, при щелчке на затемненный фон, так же плавно исчезать.

Сделаем заготовку HTML-разметки:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Демо-страница с всплывающей формой обратной связи</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/popup.js"></script>
</head>
<body>
	<button onclick="showPopup();">Нажми на меня, чтобы показать форму обратной связи</button>
	<div class="popup">
		<div class="popup_bg"></div>
		<div class="form">
			<form>
				<input type="text" placeholder="Ваше имя">
				<input type="text" placeholder="Ваша почта">
				<textarea></textarea>
				<input type="submit" calue="Отправить">
			</form>
		</div>
	</div>
</body>
</html>

Следующий шаг - подготовить файл стилей, зададим основным классам всплывающего окна необходимые параметры и добавим некоторые для красоты:

body {
	margin:0;
	text-align:center;
}

	body button {
		cursor:pointer;
		margin:40px 0 0 0;
	}

.popup {
	position: absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:none;
}

	.popup_bg {
		background:rgba(0,0,0,0.4);
		position:absolute;
		z-index:1;
		height:100%;
		width:100%;
	}
	
	
	.form {
		position: relative;
		margin:4px auto;
		z-index:2;
		width:200px;
		padding:40px 20px;
		background:#FFFFFF;
		border:1px solid #666666;
		border-radius:20px;
		box-shadow:0 0 2px rgba(0,0,0,0.5);
	}

		.form input {
			width:96%;
			padding:5px 2%;
			margin:10px 0;
			border-radius:4px;
		}

И добавляем совсем немного js-кода в popup.js:

$(document).ready(function() { // Ждём загрузки страницы
	
	$(".popup_bg").click(function(){	// Событие клика на затемненный фон	   
		$(".popup").fadeOut(800);	// Медленно убираем всплывающее окно
	});

});

function showPopup() {
	$(".popup").fadeIn(800); // Медленно выводим изображение
}

Результат примера вы можете посмотреть на демо-странице:

demo

Исходники примера скачать по ссылке ниже:

download

Задавайте вопросы в комментариях ниже.

Комментарии   

+3 # Владимир 21.02.2016 02:35
Как эту форму на word press прикрутить
Ответить | Ответить с цитатой | Цитировать
0 # Руслан 26.09.2016 08:01
Думаю можно в виджет вставить на wordpress.
Ответить | Ответить с цитатой | Цитировать
-2 # Алексей 19.10.2016 18:16
Добрый день. Объясните начинающему верстальщику. У меня этот скрипт не работает. И я не понимаю как он будет работать если не описано событие при нажатии на клавишу. Или все таки я не очень компетентен в этом вопросе.
$('.show_popup').click (function showPopup() {
$(".popup").fadeIn(800); // Медленно выводим изображение
})
вот так ваша функция заработала. только еще нужно дать класс кнопке
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 20.10.2016 08:00
Цитирую Алексей:
Добрый день. Объясните начинающему верстальщику. У меня этот скрипт не работает. И я не понимаю как он будет работать если не описано событие при нажатии на клавишу. Или все таки я не очень компетентен в этом вопросе.
$('.show_popup').click (function showPopup() {
$(".popup").fadeIn(800); // Медленно выводим изображение
})
вот так ваша функция заработала. только еще нужно дать класс кнопке


Здравствуйте, вы совершенно правы, видимо мы из демо примера не весь код скопировали, но в нашем варианте, мы добавляем BUTTON не класс, а атрибут onClick с параметром "showPopup();"
Ответить | Ответить с цитатой | Цитировать
0 # Марина 14.12.2016 18:34
Ничего не получается!!!Помогите!!Как раз такую форму надо, как у вас!!И скачивала, и со страницы копировала-совсем не то открывает!!!Я в js вообще ни бумбум!! Если скинете на имэйл буду очень признательна!!!!Спасибо!!
Ответить | Ответить с цитатой | Цитировать
0 # Никита Клейн 14.02.2017 12:02
это все конечно круто, только куда тут свое мыло писать то?
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 15.02.2017 12:15
Цитирую Никита Клейн:
это все конечно круто, только куда тут свое мыло писать то?

В данному уроке не рассматривается создание работающей формы, урок ориентирован на то, чтобы научить созданию модальных окон.
Урок по созданию формы обратной связи - http://www.web.cofp.ru/vse-o-sajtakh/sozdanie-sajta/php/152-prostaya-forma-obratnoj-svyazi-svoimi-rukami
Если совместить знания из этой статьи и там, можно получить форму обратной связи во всплывающем окне.
P.S. Статьи на сайте призваны помочь научится своими руками создавать что-то, а не предоставлять готовый код.
Ответить | Ответить с цитатой | Цитировать
0 # ademar 23.10.2017 16:30
В прикреплённом архиве в файле index.html есть ошибка. Стили подключаются неправильно. Нужно убрать ../ и всё заработает
Ответить | Ответить с цитатой | Цитировать

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Основы HTML. Урок №6. Формы, их структура.

Это шестая статья, посвященная, как понятно из заголовка HTML формам.

Теги:

html, form, action, input, select, textarea

Комментариев: 0 Подробнее
Простая форма обратной связи своими руками.

 В этой статье мы расскажем о том, как сделать простую, работающую форму обратной связи на PHP.

Теги:

php, form, simple, форма, send

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Простая стилизация checkbox в формах, приводим к необходимому внешнему виду.

В этой статье средствами jQuery мы сделаем checkbox с пользовательскими стилями, изменив стандарный способ их отображения.

Теги:

html, form, input, checkbox, type, custom style

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.