Как создать виджет (обратная связь, форма какая-либо..)? [закрыт]

// объявляем переменные 
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>