Pop-up форма ClickDimensions (всплывающее окно)

Хотите разместить форму ClickDimensions на вашем сайте, но надо сделать ее всплывающей поверх страницы после нажатия кнопки? Читайте нашу статью о том, как это сделать!

 

Использование режима модального диалога для отображения формы и/или опроса может быть очень полезно, если не хочется загромождать страницу формами. В нашем примере показано, как настроить работу в модальном диалоге при нажатии пользователем на кнопку «Выслать материалы на почту», например, а не отображать ее по умолчанию при загрузке страницы.

 

Пример всплывающей формы ClickDimensions

Настройка формы под модальный режим потребует использования HTML, CSS и JavaScript на вашем сайте. Необходимо будет добавить код формы (iFrame или виджет) в HTML, чтобы отобразить это была pop-up форма по нажатию кнопки.

 

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

 

Примечание. ClickDimensions не обеспечивает и не несет ответственности за поддержку настраиваемого кода.

HTML

В компоненте HTML вы устанавливаете фактическое содержание модального диалога (всплывающей формы). Единственное, что мы будем здесь определять, это кнопка, которая открывает модальный диалог и div, содержащий необходимый нам контент. Этот HTML должен быть добавлен на web-страницу, на которой будет вызываться форма при нажатии на кнопку.

 

<!– Триггер/Открытие окна –>
<button id=”myBtn”>Open Modal</button>

<!– Модальное диалоговое окно –>
<div id=”myModal” class=”modal”>
<!– Содержание –>
<div class=”modal-content”>
<span class=”close”>&times;</span>
<iframe> вставить код iframe вашей формы ClickDimensions
</iframe>
</div>
</div>

CSS

CSS используется для управления визуальным стилем отображаемой pop-up формы. В зависимости от того, как ваш сайт обрабатывает стили, его, возможно, необходимо добавить в заголовок страницы в виде внутренней таблицы стилей или добавить в отдельную внешнюю таблицу стилей для всего сайта. Конкретный стиль, представленный ниже, является лишь примером и может быть изменен или расширен в соответствии с конкретными потребностями.

 

/* Фон за формой */
.modal {
display: none; /* Модальное окно скрыто по умолчанию */
position: fixed; /* Фикс. Позиция на главной странице */
z-index: 1; /* Отображение на заднем плане */
left: 0;
top: 0;
width: 100%; /* 100% по ширине */
height: 100%; /* 100% по высоте */
overflow: auto; /* Включить прокрутку, если необходимо */
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); 
}
/* Содержание модального окна*/
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% от верха и центрировано */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Может быть больше и меньше, зависит от размеров экрана */
box-shadow: 5px 10px 5px #666; /*Добавить тень */
}
/* Основные свойства кнопки «Закрыть» */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
/* Свойства кнопки «Закрыть», когда вы наводите на нее курсор или взаимодействуете с ней */
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

JavaScript

JavaScript – это то, что управляет функциональностью модального диалога, позволяя его открывать и закрывать. Этот код следует оставить «как есть» во время реализации.

 

// Объявить переменную модального окна в текущей области видимости
var modal = document.getElementById(‘myModal’);
// Переменная кнопки, открывающей модальное окно
var btn = document.getElementById(“myBtn”);
// Получение элемента <span>, который закрывает модальное окно
var span = document.getElementsByClassName(“close”)[0];
// Когда пользователь нажимает кнопку, открывается pop-up форма 
btn.onclick = function() {
modal.style.display = “block”;
}
// Когда пользователь нажимает кнопку (x) <span>, закрывается окно формы
span.onclick = function() {
modal.style.display = “none”;
}
// Когда пользователь нажимает в любое место вне формы, закрыть окно формы
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}

 

Вот и все! Надеемся, что данная статья поможет вам реализовать открытие форм или опросов ClickDimensions в отдельном окне по нажатию кнопки на сайте, это бывает полезно для некоторых отдельных случаев и позволяет визуально не засорять страницы и не отображать часть форм по умолчанию.