模态在背景上无法正确关闭

Question

I have a problem with my modal when opened I am able to close it via the close button or X button, however would also like to close it on the backdrop. The backdrop will close the modal. However, when i click on another item to open another modal, the modal that had been previously closed through the backdrop will only show.

<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

You shouldn't need to write your own logic to close the modal when clicking the X or the background, twitter bootstrap does that by default as long as you have your html marked up correctly.

Remove the onclick handler and the close_modal function altogether and if you need a reference for fixing your markup, you can find a working example of multiple modals on the same page on the twitter bootstrap documentation for modals .

Answer 2

This is all you need to close the modal. Just bind this to an event.

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