FancyBox

https://qna.habr.com/q/706211

by ProjectSoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<a data-type="description" data-src="#1_box" href="javascript:;">Подробнее</a><br><a data-type="form" data-src="#1_box" href="javascript:;">Заказать</a>
<hr>
<a data-type="description" data-src="#2_box" href="javascript:;">Подробнее</a><br><a data-type="form" data-src="#2_box" href="javascript:;">Заказать</a>
<div class="hidden">
  <div id="1_box">
    <div class="form">
      <form>
        <input type="text" placeholder="Name" name="first_name">
        <input type="text" value="1" name="product">
        <br>
        <button type="submit">
          Send
        </button>
      </form>
    </div>
    <div class="description">
      <h3>
        Product #1
      </h3>
      <p>
      Повседневная практика показывает, что новая модель организационной деятельности позволяет выполнять важные задания по разработке дальнейших направлений развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. Разнообразный и богатый опыт новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Равным образом постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.
      </p>
    </div>
  </div><div id="2_box">
    <div class="form">
      <form>
        <input type="text" placeholder="Name" name="first_name">
        <input type="text" value="2" name="product">
        <br>
        <button type="submit">
          Send
        </button>
      </form>
    </div>
    <div class="description">
      <h3>
        Product #2
      </h3>
      <p>
      Товарищи! консультация с широким активом способствует...

CSS

.hidden {
  display: none !important;
}

JavaScript

(function($){
	$(document).on('click', 'a[data-type]', function(e){
  	e.preventDefault();
    var data = $(this).data(),
    	content = $(data.src + " ." + data.type);
    $.fancybox.open( content, {
      touch: false
    });
    return !1;
  });
}(jQuery));