@NoName123321123

Проблема модального окна, как исправить?

<div class="shop-container">
    {% for product in products %}
    <div class="product-box">
        <div class="product-image-container">
            {% if product.image %}
                <img class="product-image" src="{{ product.image.url }}" alt="{{ product.name }}">
            {% else %}
                <img class="product-image" src="{% static 'img/default_product.png' %}" alt="No image available">
            {% endif %}
        </div>
        <div class="product-info" onclick="document.getElementById('product-modal-{{ product.id }}').checked = true;">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-description">{{ product.description|safe }}</p>
            {% if product.stock_tf %}
                <p class="product-stock">Остаток: {{ product.stock }}</p>
            {% endif %}
            <p class="product-price">Цена {{ product.price }} <span><img class="FuchsCoin" src="{% static 'img/FuchsCoin.png' %}" alt="FuchsCoin"></span></p>
        </div>
        
        <!-- Модальное окно с оверлеем -->
        <input type="checkbox" id="product-modal-{{ product.id }}" class="product-modal-toggle">
        <div class="product-modal-overlay"></div> <!-- Оверлей для затемнения -->
        <div class="product-modal">
            <label for="product-modal-{{ product.id }}" class="modal-close">&times;</label>
            <div class="modal-content">
                <img class="modal-product-image" src="{% if product.image %}{{ product.image.url }}{% else %}{% static 'img/default_product.png' %}{% endif %}" alt="{{ product.name }}">
                <div class="modal-info">
                    <h2 class="modal-product-name">{{ product.name }}</h2>
                    <p class="modal-product-description">{{ product.description|safe }}</p>
                    {% if product.stock_tf %}
                        <p class="modal-product-stock">Остаток: {{ product.stock }}</p>
                    {% endif %}
                    <p class="modal-product-price">Цена {{ product.price }} FuchsCoin</p>

                    <form method="post" action="{% url 'shop' %}" class="buy-form" data-product-id="{{ product.id }}">
                        {% csrf_token %}
                        <input type="hidden" name="product_id" value="{{ product.id }}">
                        {% if product.stock == 0 and not product.available_even_if_stock_0 %}
                            <button type="button" class="modal-buy-button disabled" disabled>Недоступно</button>
                        {% else %}
                            <button type="submit" class="modal-buy-button">Купить</button>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const modals = document.querySelectorAll('.product-modal');
  const overlays = document.querySelectorAll('.product-modal-overlay');
  const receiptModal = document.getElementById('receipt-modal');
  const receiptModalOverlay = document.getElementById('receipt-modal-overlay');
  const receiptStatus = document.getElementById('receipt-status');
  const receiptProductName = document.getElementById('receipt-product-name');
  const receiptProductImage = document.getElementById('receipt-product-image');
  const receiptBalanceBefore = document.getElementById('receipt-balance-before');
  const receiptProductPrice = document.getElementById('receipt-product-price');
  const receiptBalanceAfter = document.getElementById('receipt-balance-after');
        
  overlays.forEach(overlay => {
      overlay.addEventListener('click', function () {
document.querySelectorAll('.product-modal-toggle').forEach(toggle => {
                    toggle.checked = false;
                });
            });
        });

const buyForms = document.querySelectorAll('.buy-form');
 buyForms.forEach(form => {
form.addEventListener('submit', function (event) {
    event.preventDefault();
const productId = form.getAttribute('data-product-id');
 
document.getElementById(`product-modal-${productId}`).checked = false;
        
 const formData = new FormData(form);
        
fetch(form.action, {
     method: 'POST',
  body: formData,
   headers: {
   'X-Requested-With': 'XMLHttpRequest'
       }
    })
.then(response => response.json())
  .then(data => {
         receiptStatus.textContent = data.transaction_status === 'success' ? 'Покупка успешно совершена' : 'Недостаточно средств';
                    receiptStatus.style.color = data.transaction_status === 'success' ? 'green' : 'red';
                    receiptProductName.textContent = data.product_name;
                    receiptProductPrice.textContent = data.product_price;
                    receiptBalanceBefore.textContent = data.balance_before;
                    receiptBalanceAfter.textContent = data.balance_after;
                    receiptProductImage.src = data.product_image;
        
                    receiptModal.classList.add('show');
                    receiptModalOverlay.classList.add('show');
                });
            });
        });

        receiptModalOverlay.addEventListener('click', function () {
            receiptModal.classList.remove('show');
            receiptModalOverlay.classList.remove('show');
        });
    });
</script>


.shop-container {
    display: grid;
    grid-template-columns: repeat(4, 300px); 
    gap: 30px 75px;
    align-items: start;
    box-sizing: border-box;
    justify-content: center;
    padding-bottom: 139px ;
}

/* Бокс товара */
.product-box {
    border-color: #ff9900;
    border: 1px solid #ff9900;
    box-shadow: 0 4px 16px #ff99009b;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    transition: transform 0.3s ease;
    cursor: pointer;
    max-width: 350px; 
    min-width: 350px;
    max-height: 170px;
    min-height: 170px;
    position: relative;
    transition: 0.5s;
}

.product-box:hover {
    transition: 0.5s;
    box-shadow: 0 13px 10px rgba(0, 0, 0, 0.185);
    transform: scale(0.99);
}

/* Изображение товара */
.product-image-container {
    display: flex;
    align-items: center; 
    justify-content: center; 
}

.product-image {
    height: 168px; 
    width:  130px; 
    object-fit: cover;
    border-radius: 9px;
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    box-sizing: border-box; 
}

.product-name {
    font-weight: bold;
    font-size: 17px;
    color: #333;
}

.product-description {
    margin-top: 5px;
    margin-bottom: auto;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.product-price {
    font-size: 16px;
    font-weight: bold;
    color: #ff9900;
}

.product-stock {
    margin-top: auto;
    font-size: 16px;
    font-weight: bold;
    color: red;
}

.product-modal-toggle {
    display: none;
}

.product-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-modal-toggle:checked + .product-modal-overlay {
    opacity: 1;
    visibility: visible;
}

.product-modal-toggle:checked + .product-modal-overlay + .product-modal {
    opacity: 1;
    visibility: visible;
}

.product-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 0px;
    right: 13px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.3s ease;
    font-size: 30px;
}

.modal-close:hover {
    color: #ff9900;
}

.modal-content {
    display: flex;
    align-items: start;
    height: 500px;
}

.modal-product-image {
    width: 400px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.modal-info {
    flex-grow: 1;
}

.modal-product-name {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.modal-product-description {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}

.modal-product-price {
    font-size: 24px;
    font-weight: bold;
    color: #ff9900;
    margin-bottom: 10px;
}

.modal-product-stock {
    font-size: 18px;
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
}

.modal-buy-button {
    background-color: #ff9900;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.modal-buy-button:hover {
    background-color: #e68a00;
    transform: scale(1.03);
    transition: 0.5s;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.modal-buy-button.disabled {
    background-color: gray;
    cursor: not-allowed;
}

.modal-product-description p12 {
    color: red;
    font-weight: 600;
}

.modal-product-description p11 {
    color: red;
    font-weight: 600;
}

Здесь есть эффект уменьшения бокса товара при наведении, что явно мешает корректному отображению модального окна товара. Помогите исправить, пожалуйста, я достаточно новичок в верстке html и css, поэтому слабо в этом разбираюсь. Возможно, в коде много лишнего и грязи. Спасибо за понимание.
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cryptoUser
.shop-container {
    display: grid;
    grid-template-columns: repeat(4, 300px); 
    gap: 30px 75px;
    align-items: start;
    box-sizing: border-box;
    justify-content: center;
    padding-bottom: 139px;
}

/* Бокс товара */
.product-box {
    border: 1px solid #ff9900;
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.6);
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    max-width: 350px;
    min-width: 350px;
    max-height: 170px;
    min-height: 170px;
    position: relative;
}

.product-box:hover {
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); /* Поднятие карточки вместо уменьшения */
}

/* Изображение товара */
.product-image-container {
    display: flex;
    align-items: center; 
    justify-content: center; 
}

.product-image {
    height: 168px; 
    width: 130px; 
    object-fit: cover;
    border-radius: 9px;
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
}

.product-name {
    font-weight: bold;
    font-size: 17px;
    color: #333;
}

.product-description {
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.product-price {
    font-size: 16px;
    font-weight: bold;
    color: #ff9900;
}

.product-stock {
    font-size: 16px;
    font-weight: bold;
    color: red;
}

/* Скрытый чекбокс для открытия модалки */
.product-modal-toggle {
    display: none;
}

.product-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
}

.product-modal-toggle:checked + .product-modal-overlay {
    opacity: 1;
    visibility: visible;
}

.product-modal-toggle:checked + .product-modal-overlay + .product-modal {
    opacity: 1;
    visibility: visible;
}

.product-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 13px;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: #ff9900;
}

.modal-content {
    display: flex;
    align-items: start;
    height: 500px;
}

.modal-product-image {
    width: 400px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.modal-info {
    flex-grow: 1;
}

.modal-product-name {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.modal-product-description {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}

.modal-product-price {
    font-size: 24px;
    font-weight: bold;
    color: #ff9900;
    margin-bottom: 10px;
}

.modal-product-stock {
    font-size: 18px;
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
}

.modal-buy-button {
    background-color: #ff9900;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.modal-buy-button:hover {
    background-color: #e68a00;
    transform: scale(1.03);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.modal-buy-button.disabled {
    background-color: gray;
    cursor: not-allowed;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы