Question

我正在实施礼服购物网站。首页显示所有连衣裙的描述与网格中的个人＆＃39;添加到购物车＆＃39;按钮。单击按钮时，模态弹出窗口显示项目价格和数量。但是每个模态弹出窗口仅加载第一个项目描述而不是它们自己的描述。这是代码：

<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2()" title="Add to Cart" type="image"  style=" margin-top: 90px; margin-left:110px;   width: 35px; height: 35px; background: white; "  /></button>

// here is starting modal popup
<div id="mpopupBox1" class="mpopup1">
    <!-- mPopup content -->
    <div class="mpopup1-content">
        <div class="mpopup1-head">
            <span class="close8">×</span>
            <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>    
        </div>
        <div class="mpopup1-main" >
            <br/>
            <br/>         
            <p>
                <b>Product Code: <?php echo $row['id']; ?></b>
            </p> 
            <div style="margin: 30px 40px 40px 250px;">
                <p id="demo">
                    <font size="6" ><b>PKR</b></font>
                    <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font>
                    <br/>
                </p> 
            </div>
            <div style="margin: -75px 60px 40px 0px;" >
                <label><font size="4">Quantity</font></label>   
            </div>  
            <input  style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
        </div>
        <div class="mpopup1-foot">
            <!-- <p>created by CodexWorld</p> -->
        </div>
    </div>
</div>

// here is javascript function
<script type="text/javascript">
    var mpopup1 = document.getElementById('mpopupBox1');

    // get the link that opens the mPopup
    var mpLink1 = document.getElementById("mpopupLink1");

    // get the close action element
    var close8 = document.getElementsByClassName("close8")[0];

    // open the mPopup once the link is clicked
    mpLink1.onclick = function() {
        mpopup1.style.display = "block";
    }

    var images1 = document.querySelectorAll('button[title="Add to Cart"]');
    for(var i=0, len = images1.length; i < len; i++){
        images1[i].addEventListener('click', openModal2);
    }

    function openModal2() {
        mpopup1.style.display = "block";          
    }

    // close the mPopup once close element is clicked
    close8.onclick = function() {
        mpopup1.style.display = "none";
    }

    // close the mPopup when user clicks outside of the box

</script>

Answer 1

<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2($row['id'])" title="Add to Cart" type="image"  style=" margin-top: 90px; margin-left:110px;   width: 35px; height: 35px; background: white; "  /></button>

// here is starting modal popup
<div id="mpopupBox1" class="mpopup1">
    <!-- mPopup content -->
    <div class="mpopup1-content">
        <div class="mpopup1-head">
            <span class="close8">×</span>
            <h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>    
        </div>
        <div class="mpopup1-main" >
            <br/>
            <br/>         
            <p>
                <b>Product Code: </b><span id="row_id"><?php echo $row['id']; ?></span>
            </p> 
            <div style="margin: 30px 40px 40px 250px;">
                <p id="demo">
                    <font size="6" ><b>PKR</b></font>
                    <input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font>
                    <br/>
                </p> 
            </div>
            <div style="margin: -75px 60px 40px 0px;" >
                <label><font size="4">Quantity</font></label>   
            </div>  
            <input  style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
        </div>
        <div class="mpopup1-foot">
            <!-- <p>created by CodexWorld</p> -->
        </div>
    </div>
</div>

// here is javascript function
<script type="text/javascript">
    var mpopup1 = document.getElementById('mpopupBox1');

    // get the link that opens the mPopup
    var mpLink1 = document.getElementById("mpopupLink1");

    // get the close action element
    var close8 = document.getElementsByClassName("close8")[0];

    // open the mPopup once the link is clicked
    mpLink1.onclick = function() {
        mpopup1.style.display = "block";
    }

    var images1 = document.querySelectorAll('button[title="Add to Cart"]');
    for(var i=0, len = images1.length; i < len; i++){
        images1[i].addEventListener('click', openModal2);
    }

    function openModal2(id) {
      //write the code to fetch data from Database using that id. I am not sure about your database details. So please do it yourself.
        document.getElementById('row_id').value = name(javascript variable);// like this push value to every element you want to show
        mpopup1.style.display = "block";          
    }

    // close the mPopup once close element is clicked
    close8.onclick = function() {
        mpopup1.style.display = "none";
    }

    // close the mPopup when user clicks outside of the box

</script>

模态弹出窗口显示项目所有按钮的第一项详细信息

1 个答案: