Question

我有一个像这样的模态框，问题是，当我点击应该打开模态框的按钮DETAILS时，nothig发生，我的文件在我有模板的地方是在chrome控制台中操作，但没有显示。当我从<div class="modal-content">分隔文件中获取所有内容时，它正在工作，但是如果我想将它组合在一起，我就无法使其工作。

<div class="container">

<!-- Modal -->
  <div class="modal fade" id="itemBox" role="dialog">
    <div class="modal-dialog modal-lg">


      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
    <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
     <div class="modal-body display-content">
                <div class="container-fluid">
                <?php while($stmt->fetch()) : ?>
                    <div class="col-md-4"><img src=<?php echo $image;?> class="image-responsive">
                    <div class="col-sm-6">
                        <form  method="post">
                        <div class="form-group">
                            <label for="quantity">Quantity:</label>
                            <input type="number" class="form-control" max=<?=$maxquantity?> min="0" id="quantity" name="quantity" value="<?=($maxquantity > 0) ? 1 : 0?>"/>
                            <input type="submit" class="add-to-basket btn btn-success" <?php if(!($maxquantity > 0)) {?> disabled <?php } ?> name="add-to-basket" Value=<?php if(!($maxquantity > 0)) {?>"Out of stock" <?php }else{?>"Add to cart"<?php } ?> />
                        </div>
                        </form>
                    </div>

                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-7" id="desc">
                        <p><b>Product name:</b> <?php echo $name;?></p>
                        <h4>Description</h4>
                        <p><?php echo $description;?></p>
                        <hr>
                        <hr>
                    </div>

                </div>
                </div>
                <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
      <?php endwhile; ?>
    </div>  
    </div>  
            </div>
        </div>
      </div>
     </div>

我想打开它并用这个JS显示它的内容

$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');

        $.ajax({
        type: 'POST',
        cache: false,
        data: {modalID : product_id},
        url: 'includes/getID.php',
        success: function(data) {
            $("#itemBox").attr('data-id',product_id)
            $("#itemBox").modal('show').on('shown.bs.modal', function () {
                $(this).find(".modal-content").html(data)
            });
        }
    });
});

Answer 1

试试这个：

$('.show-modal').click(function(){
    var product_id = $(this).attr('data-id');

        $.ajax({
        type: 'POST',
        cache: false,
        data: {"modalID" : product_id},
        url: 'includes/getID.php',
        success: function(data) {
            $("#itemBox").attr('data-id',product_id);
            $("#itemBox").find(".modal-body").html(data);
            $("#itemBox").modal('show');
        }
    });
});

莫代尔盒子不会打开

1 个答案: