这是一个html，它生成一个由DB调用的6个对象的数组（这很好），然后将它们打印到bootstrap行。
<div class="row products">
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<div class="col-md-2 col-sm-6">
<div class="product">
<div class="image">
<a href="#"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a>
<div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
</div>
<div class="text">
<h3> <a href="detail.html"><?= $product["manufacturer"]; ?></a></h3>
<p class="price">$<?= $product["rrp"]; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
这是生成模态的Jquery
<script>
function quickModal(recid) {
alert(recid)// checked it was receiving ID
// setting an id object as recid from db
var data = {"id" : recid};
jQuery.ajax({
url : '/MagV4(Final)/includes/quickModal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#product-quick-view-modal').modal('toggle');
},
error: function(){
alert("something wrong");
}
});
}
</script>
这是模态代码，现在我知道ID正在传递（来自Modal的警报），但模态在加载第一个模态后没有生成新内容（有6个不同的磁轮），所以如果例如，我为id为1的第一个mag加载模态，id为7的第二个mag也为id 1创建一个模态。 由于某种原因，使用$ _POST [＆＃39; id＆＃39;]在模态中不起作用。
<?php
require_once '../core/dbcon.php';
if(isset($_GET['id'])) {
$id = $_GET['id'];
$id = (int)$id;
}
echo $id;
$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
$sql = ""
?>
<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<div class="row quick-view product-main">
<div class="col-sm-6">
<div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>
<!-- Ribbons
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">SALE</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon
<div class="ribbon ribbon-quick-view new">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon-->
<div class="row thumbs">
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
</div>
</div>
<div class="col-sm-6">
<h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
<p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
<div class="box">
<form action="add_cart.php" method="post">
<p class="price"><?= $product['rrp']; ?></p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="modal_size">Choose your size</label>
<select id="modal_size" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
<p>Current Stock: 3</p>
<div class="form-group">
<label for="modal_quantity">Quantity</label>
<input type="number" value="1" id="modal_quantity" class="form-control">
</div>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add to cart</button>
<button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
</p>
</form>
</div>
<!-- /.box-->
<div class="quick-view-social">
<h4>Show it to your friends</h4>
<p><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>
在新脚本中添加，但现在第一个模式之后的模态只是闪烁然后以相同的信息消失。
<script>
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#quick-view-button').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#product-quick-view-modal').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
</script>
答案 0 :(得分：1)
经过进一步研究，我发现了一些提及此行为here和here的Bootstrap问题。我已经要求重新开启issue 5514。
与此同时，这个jQuery会修补问题*：
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#myModalLabel').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#utility_body').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
请参阅http://jsfiddle.net/jhfrench/qv5u5/51/了解实例。*
因此，在您的情况下，您还可以修改从<button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button>到<a href="/MagV4(Final)/includes/quickModal.php?recid=<?= $product["recid"]; ?>" data-toggle="modal" class="btn btn-default btn-sm">Quick view</a>的通话按钮。 FWIW，我赞成这种“链接调用模式”方法（vs“按钮调用模式”）因为这也允许用户右键单击链接并在新的浏览器选项卡中打开模态的内容，如果他们这样选择的话。因此，请考虑一下UX的含义。
* - 由于某种原因，有时当你点击小提琴中的按钮时，模态将显示为空白。这在我正在使用的应用程序中不是问题，因此我怀疑这是与此问题/答案无关的问题。