Question

打开时我的模态有问题我可以通过关闭按钮或X按钮关闭它，但是也想在背景上关闭它。背景将关闭模态。但是，当我点击另一个项目以打开另一个模态时，之前通过背景关闭的模态将仅显示。

<div class="modal fade details-1 " id="details-modal" tabindex="-1" role="dialog" aria-label="details-1" aria-hidden="true" data-dismiss="modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" onclick="close_modal();" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <!-- all going to be dynamic later -->
                    <h4 class="modal-title" class="text-center"><?php echo $product['title']; ?></h4>
                </div>
                <div class="modal-body">
                    <!-- we are going to put container fluid inside the modal body so we can
                    give it cols -->
                    <div class="container-fluid">
                        <div class="row">
                            <span id="modal_errors" class="bg-danger"></span>
                            <div class="col-sm-6 fotorama"  data-nav="thumbs">
                                    <?php $photos = explode(',',$product['image']);
                          foreach($photos as $photo): ?>
                                        <img src="<?= $photo; ?>" alt="<?= $product['title'] ?>" class="details img-responsive auto">
                                        <?php endforeach; ?>

                            </div>
                            <div class="col-sm-6">
                                <h4>Details</h4>
                                <p><?= nl2br($product['description']); ?></p>
                                <hr>
                                <p>Price: &pound;<?= $product ['price']; ?></P>
                                    <p>Brand: <?= $brand['brand']; ?></p>
                                <form action="add_cart.php" method="post" id="add_product_form">
                                    <input type="hidden" name="product_id" id="product_id" value="<?=$id;?>">
                                    <input type="hidden" name="available" id="available" value="">
                                    <div class="form-group">
                                        <!-- Allows us to control width of input -->
                                    </div>
                                    <div class="form-group">
                                        <label for="size">Size: </label>
                                        <select name="size" id="size" class="form-control">Size
                                            <option value=""></option>
                                            <?php foreach($size_array as $string) {
                                                $string_array = explode(':', $string);
                                                $size = $string_array[0];
                                                $available = $string_array[1];
                                                if($available > 0){
                                                echo '<option value="'.$size.'" data-available="'.$available.'">'.$size.' ('.$available.' Available)</option>';
                                                }
                                             } ?>
                                        </select>
                                    </div><br><br>
                                    <div class="col-xs-3 pull-right">
                                        <label for="quantity">Qty: </label>
                                        <input type="number" class="form-control" id="quantity" name="quantity"  min="0">
                                    </div><div class="col-xs-9"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" onclick="close_modal();">Close</button>
                    <button class="btn btn-deafault" type="submit" onclick="add_to_cart();return false;"><span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</button>
                </div>
            </div>
        </div>
    </div>
    function close_modal() {
    jQuery('#details-modal').modal('hide');
    setTimeout(function() {

        jQuery('#details-modal').remove();
        jQuery('.modal-backdrop').remove();
    },300);
}

Answer 1

单击X或背景时，您不需要编写自己的逻辑来关闭模式，只要您正确标记了html，twitter默认就会执行此操作。

完全删除onclick处理程序和close_modal函数，如果需要修复标记的参考，可以在{{3}的同一页面上找到多个模态的工作示例}。

Answer 2

这就是关闭模态所需的全部内容。只需将此绑定到事件即可。

jQuery('#details-modal').modal('hide');

模态未在背景上正确关闭

2 个答案: