Question

首先，代码是一团糟，因为我从一个不认真对待他的代码的人那里得到了一些外部帮助，现在我需要满足最后期限并专注于功能，所以我事先道歉，我将及时清理。

我们正在创建一个简单的购物页面，其中包括PHP，引导程序。我们将产品信息存储在mysqli数据库中。我们为每个项目提供了多种模式，您可以在其中选择尺寸，然后将其添加到购物车中。

问题是，虽然看不到引导程序模式，但它们仍然是“可点击的”，好像它们在未激活时一样处于活动状态。至少就我所知，这不适用于购物车模式。

我试图通过更改模态类的z索引来解决此问题，但这没用。

html（和PHP）：

 <section class="products">
    <?php
    $db = new Database();
    $db->connect();
    $db->select('tbl_items','productid,Product_Name,Product_Price,Product_Quantity,Category,Product_Picture',NULL,'Category!="Beverage" and Product_Quantity > 0','productid ASC'); // Table name, Column Names, JOIN, WHERE conditions, ORDER BY conditions
    $res = $db->getResult();
    $rows = array();
    foreach ($res as $row) 
    {?>
    <div class="product-card">
        <form method="post" class="product-form card-form">
            <div class="product-image">
                <?php echo '<img class="gallery-pic responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
            </div>

            <div class="product-info-container">
                <div class="product-info">
                    <h3 id="prod-name" class="prod-info"><?php echo $row['Product_Name']; ?><h3>
                </div>

                <div class="product-info">
                    <span class="prod-info">
                        <h4>R<?php echo $row['Product_Price']; ?></h4>
                    </span>
                </div>

            </div>
            <div class="product-info add-btn-container">
                <div class="customn-btn btn-lg btn-block add-cart-btn" title="Add to FOGo"
                    data-toggle="modal" data-target="#product<?php echo $row['productid'];?>modal"
                    onclick="resetSize()">
                    Add to cart<i class="fa fa-cart-plus" aria-hidden="true"></i>
                </div>
            </div>
        </form>
    </div>

我将产品ID分配给的模式ID，以便可以在上方的“添加到购物车”按钮中进行引用

继续循环：

        <div class="modal fade product-modal" id="product<?php echo $row['productid'];?>modal"
        role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header color-gradient">
                    <button type="button" title="Close Plate" class="close"
                        data-dismiss="modal">&times;</button>
                    <h4 id="item-title" class="modal-title"><?php echo $row['Product_Name'];?></h4>
                </div>
                <div class="display-pic-container">
                    <?php echo '<img class=" responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
                </div>
                <div class="modal-footer">
                    <div class="form-group">
                        <label class="size-lbl" for="size">Size</label>
                        <select class="form-control" name="size" onchange="changeSize(event)">
                            <option value="Small">Small</option>
                            <option value="Medium">Medium</option>
                            <option value="Large">Large</option>
                        </select>
                    </div>
                    <button type="button" title="Close Plate"
                        class="close-btn btn-lg btn-block cart-btn" id="close_cart"
                        data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
                        Close</button>

                    <span onclick="addToCart(<?php echo $row['productid'];?>, event )" 
                        title="Add to cart" class="btn-lg btn-block cart-btn check-out-btn"><i
                            class="fa fa-credit-card" aria-hidden="true"></i>
                        Add to cart</span>
                </div>
            </div>
        </div>
    </div>
    <?php
}
?>
</section>

引导模态未正确隐藏

0 个答案: