-2

Подскажите, пожалуйста, где почитать, может где исходники есть этого *** добра.. Все, что ни гуглится, так это живосайты и прочее подобное. А мне бы хотелось просто выезжающую или в виде модального окна форму обратной связи, с уведомлением на почту. Прикреплена к краю окна (скрины прикрепил). Спасибо!

1

2

1
  • Если нужна просто выезжающая или появляющаяся форма, то проще будет сделать самописную)
    – Kvilios
    13 фев 2019 в 12:13

1 ответ 1

1

В дополнение к вышеизложенному комментарию - как пример:

// объявляем переменные
const feedback = $('#feedback');
const start = feedback.find('.start');
const background = feedback.find('.background');
const modal = feedback.find('.modal');

// инициализируем фидбэк
initFeedback();

// ф-ия закрытия (immediate - плавно закрыть или моментально)
function hideFeedback(immediate = false) {
  if (immediate) {
    modal.hide();
    background.hide();
  } else {
    // тут можно какую-нидь анимацию скрытия поставить, но я использую стандартный fadeOut
    modal.fadeOut(() => {
      background.fadeOut();
    });
  }
}

// ф-ия показа
function showFeedback() {
  // тут можно какую-нидь анимацию показа поставить, но я использую стандартный fadeIn
  background.fadeIn(() => {
    modal.fadeIn();
  });
}

// ф-ия инициализации
function initFeedback() {
  // тут делаем, чтобы кнопка была по центру по вертикали (50% - половина ширины + зависимость из CSS), а также фиксим погрешность, которая образовалась при CSS transform: rotate(-90deg);, а именно - высота кнопки - ее ширина + зависимость из CSS
  const right = start.css('right');
  const top = start.css('top');
  start.css({
    right: `calc(${start.outerHeight(true) - start.outerWidth(true)}px + ${right})`,
    top: `calc(${start.outerWidth(true) / 2}px + ${top})`
  });

  // по умолчанию скрываем фидбэк моментально
  hideFeedback(true);
}
#feedback {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

#feedback>* {
  pointer-events: auto;
}

#feedback>.start {
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(-90deg);
  transform-origin: top left;
}

#feedback>div.start {
  background: url("https://1ep4fb1p9c8v44y1114fn0qi-wpengine.netdna-ssl.com/wp-content/uploads/2016/04/Contact-Us-Button.png") center / contain no-repeat;
  cursor: pointer;
  height: 30px;
  opacity: .5;
  transition: all .1s ease;
  width: 150px;
}

#feedback>div.start:hover {
  opacity: 1;
  transform: rotate(-90deg) translateY(-10px);
}

#feedback>.background {
  background-color: rgba(0, 0, 0, .5);
  height: 100%;
  position: absolute;
  width: 100%;
}

#feedback>.modal {
  background-color: white;
  padding: 10px;
  z-index: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Заголовок</h1>
<p>Контент</p>
<div id="feedback">
  <div class="start" onclick="showFeedback()"></div>
  <!-- Или вариант со стандартной кнопкой: -->
  <!-- <button class="start" onclick="showFeedback()">Обратная связь</button> -->
  <div class="background" onclick="hideFeedback()"></div>
  <div class="modal">
    <h3>Обратная связь</h3>
    <form action="#">
      <input type="email" required placeholder="Email" />
      <button type="submit">Отправить</button>
    </form>
  </div>
</div>

10
  • 1
    У вас в примере синтаксис css-свойства background некорректный, кнопка в итоге прозрачная
    – andreymal
    13 фев 2019 в 21:49
  • Это быстро правиться)
    – Serj
    14 фев 2019 в 4:43
  • Kvilios, спасибо большое!
    – Serj
    14 фев 2019 в 4:44
  • @andreymal, так да, только при чём здесь background? прозрачность задается кнопке через opacity: .5; да и консоль если открыть видно, что background применился корректно: joxi.ru/Dr89zGNtoKWQxm
    – Kvilios
    14 фев 2019 в 7:04
  • 1
    Да, почему то файл бэкграунда не подгружается ни в какую в мозилле, хром его открывает.
    – Serj
    14 фев 2019 в 7:54

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.