CodePen Embed - popup cart

<html>
<body>
<div class="card">
<div class="card-img">
<img src="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" data-img="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" width="300" height="350" alt="Портупея">
</div>
<div class="card-content">
<h3 class="card-title" >Лицо счастливого мужчины</h3>
<ul class="card-size">
<li class="sizeselect">xs</li>
<li class="sizeselect">s</li>
<li class="sizeselect">m</li>
<li class="sizeselect">l</li>
<li class="sizeselect inactive">xl</li>
<li class="sizeselect inactive">xxl</li>
</ul>
<div class="card-color">
<div class="black"></div>
<div class="red"></div>
 </div>
<div class="card-price">
<span class="col-6 old-price">4990 р.</span>                                 <span class="col-6 new-price">2990 р.</span>                              </div>
<a class="card-btn" href="#product-btn" rel="modal:open">Заказать</a>
</div>
</div>  
  <div class="card">
<div class="card-img">
<img src="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" data-img="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" width="300" height="350" alt="Портупея">
</div>
<div class="card-content">
<h3 class="card-title" >Нелицо счастливого мужчины</h3>
<ul class="card-size">
<li class="sizeselect" value="xs">xs</li>
<li class="sizeselect" value="s">s</li>
<li class="sizeselect" value="m">m</li>
<li class="sizeselect" value="l">l</li>
<li class="sizeselect inactive" value="xl">xl</li>
<li class="sizeselect inactive" value="xxl">xxl</li>
</ul>
<div class="card-color">
<div class="black"></div>
<div class="red"></div>
 </div>
<div class="card-price">
<span class="col-6 old-price">4990 р.</span>                                 <span class="col-6 new-price">2990 р.</span>                              </div>
<a class="card-btn" href="#product-btn" rel="modal:open">Заказать</a>
</div>
</div>  
 <div class="card">
<div class="card-img">
<img src="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" data-img="https://st.depositphotos.com/1743476/1276/i/600/depositphotos_12765214-stock-photo-smiling-happy-guy.jpg" width="300" height="350" alt="Портупея">
</div>
<div class="card-content">
<h3 class="card-title" >Лицо несчастливого мужчины</h3>
<ul class="card-size">
<li class="sizeselect" value="xs">xs</li>
<li class="sizeselect" value="s">s</li>
<li class="sizeselect" value="m">m</li>
<li class="sizeselect" value="l">l</li>
<li class="sizeselect inactive" value="xl">xl</li>
<li class="sizeselect inactive" value="xxl">xxl</li>
</ul>
<div class="card-color">
<div class="black"></div>
<div class="red"></div>
 </div>
<div class="card-price">
<span class="col-6 old-price">4990 р.</span>                                 <span class="col-6 new-price">2990 р.</span>                              </div>
<a class="card-btn" href="#product-btn" rel="modal:open">Заказать</a>
</div>
</div>   
<!-- Popup -->  
<div id="product-btn" class="modal">
  <div class="popup-content row">
    <div class="col-6">
    <div class="popup-img">
    </div>
    </div>
    <div class="col-6">
    <div class="popup-title">
      <h3></h3>
    </div>
    <div class="popup-price">
      <span class="old-price" ></span>
      <span class="new-price"></span>
    </div>
 <!-- Popup Select -->
      <ul class="poplist">
       <span></span>
      </ul>
      <input type="text" placeholder="Введите ваше имя" />
      <input type="tel" placeholder="Введите ваш телефон" />
      <a href="#">Оформить заказ</a>
    </div>
  </div>
</div>
  
</body>
</html>

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
img {
  max-width: 100%;
  height: auto;
}
.card {
  padding: 20px 15px;
  box-sizing: border-box;
  border-radius: 8px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  bacground: #eaeaea;
  box-shadow:0 0 12px 1px rgb(13 13 13 / 8%);
}
ul {
  padding: 0;
}
ul li {
  list-style-type: none;
}
.popup-content input {
  height: 40px;
  margin-top: 10px;
}
.popup-content .col-6:last-child {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}
.card-size {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-x: auto;
}

.sizeselect {
  font-size: 18px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  text-align: center;
  padding-top: 4px;
  margin: 2px;
  transition: all 300ms ease-in-out;
  line-height: 1.7;
}
.sizeselect.active {
  background: #333;
  border-radius: 4px;
  color: #eaeaea;
}
.sizeselect.inactive {
  background: #eee;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%);
}

/* Popup Select */

select {
  transition: all 300ms ease-in-out;
}

.poplist li {
  display: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding: 5px 10px;
  border-top: 1px solid black;
  min-width: 150px;
  box-sizing: border-box;
}

.poplist li:first-child {
  display: block;
  border-top: 0px;
}

.poplist {
  border: 1px solid black;
  display: inline-block;
  padding: 0;
  border-radius: 4px;
  position: relative;
}

.poplist li:hover {
  background-color: #ddd;
}

.poplist li:first-child:hover {
  background-color: transparent;
}

.poplist.open li {
  display: block;
}

.poplist span:before {
  position: absolute;
  top: 5px;
  right: 15px;
  content: "\2193";
}

.poplist.open span:before {
  content: "\2191";
}

// choose a size

$( '.sizeselect' ).click (function() {
    $( this ).not('.inactive').addClass( 'active' ).siblings().removeClass( 'active' )
});

$(document).ready(function(){
  $('.sizeselect:not(.active)');
});

//popup

$('.card a.card-btn').on('click', function(event) {
    $('#product-btn').modal({
      fadeDuration: 250,
      fadeDelay: 1
    });
    return false;
  });

  $('.card-btn').on('click', function(){
    
    $('#product-btn .popup-img').html('<img src="'+$(this).closest('.card').find('img').attr('src')+'" />');
    $('#product-btn .popup-title h3').html($(this).closest('.card').find('h3').text());
    $('#product-btn .old-price').html($(this).closest('.card').find('.old-price').text());
    $('#product-btn .new-price').html($(this).closest('.card').find('.new-price').text());
    $('#product-btn .poplist').html($(this).closest('.card').find('ul li.sizeselect:not(.inactive)').clone());
    
});

// Popup Select

$(".poplist").on('click', function() {
  var is_open = $(this).hasClass("open");
  if (is_open) {
    $(this).removeClass("open");
  } else {
    $(this).addClass("open");
  }
});

$(".poplist li").on('click', function() {

  var selected_value = $(this).html();
  var first_li = $(".poplist li:first-child").html();

  $(".poplist li:first-child").html(selected_value);
  $(this).html(first_li);

});

$(document).mouseup(function(event) {

  var target = event.target;
  var select = $(".poplist");

  if (!select.is(target) && select.has(target).length === 0) {
    select.removeClass("open");
  }
});

This Pen is owned by nikita on CodePen.

See more by @mirayoo on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css

External CSS

External JavaScript