Bootstrap 4 關閉模式，背景不會消失

Question

我正在使用 boostrap 4 所以我有

css：

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

js：

<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

所以我有模態，里面是產品的復選框。

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="smallmodalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body items-container products">
            <div class="row form-group">
                <div class="col col-sm-6 pr-1">
                    <select data-placeholder="Choose Brand..." multiple class="standard-select mb-3">
                        <option value=""></option>
                        <option value="1">Brand 1</option>
                        <option value="1">Brand 2</option>
                    </select>
                </div>
                <div class="col col-sm-6 pl-0">
                    <input type="text" id="search_by_name" placeholder="Search by Name" class="form-control">
                </div>
            </div>
            <div id="product_checkboxes" style="margin-top: 45px;position:relative;">
                <div class="partial-loader hide"></div>
                <div class="checkbox">
                    <label class="checkbox-bootstrap checkbox-lg">                           
                        <input type="checkbox" class="product-checkbox" name="product" value="1">             
                        <span class="checkbox-placeholder"></span>           
                        Sample Item
                    </label>
                </div>
                <div class="checkbox">
                    <label class="checkbox-bootstrap checkbox-lg">                           
                        <input type="checkbox" class="product-checkbox" name="product" value="2">             
                        <span class="checkbox-placeholder"></span>           
                        Sample Item 2
                    </label>
                </div>
            </div>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="add_selected_button" disabled>Add Selected Products</button><img class="hide loader" src="/logo/loader.gif" />
      </div>
    </div>
  </div>
</div>

在我的 Js 文件中，我有 add_selected_button 的事件

$(modalJs.addSelectedButtonSelector).click(function() {
    var me = $(this);

    me.attr('disabled', 'disabled');
    $(modalJs.chosenSelector).prop('disabled', true).trigger("chosen:updated");
    $(modalJs.inputSearchTextSelector).attr('disabled', 'disabled');
    $('.btn-secondary').attr('disabled', 'disabled');

    var selectedId = [];
    $(modalJs.productCheckboxesSelector +' input:checked').each(function() {
        selectedId.push(parseInt($(this).val()));
    });

    var loader = $('.products .partial-loader');
    loader.removeClass(core.common.classToHideElement);
    $('img.loader').show();

    var csrfToken = $('meta[name="csrf-token"]').attr("content");
    var store = $.ajax({
        url: "/product/store",
        type: "PUT",
        dataType: 'json',
        data: {
            product_ids: selectedId, 
            _csrf : csrfToken
        },
        success: function (response) {
            $('#modal').modal('hide');
        },
    });
});

我試圖在 ajax 請求完成並成功后手動隱藏模式。 根據他們的網站只是把這個代碼

$('#myModal').modal('hide')

它關閉模態，但背景不會消失。

我嘗試這樣做

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

基地在這里

它起作用了，背景消失了，但是除非我刷新頁面，否則顯示模態的按鈕不再起作用。

按鈕：

<button class="btn btn-primary ml-2" data-toggle="modal" data-target="#modal">
    <i class="fa fa-plus" aria-hidden="true"></i>
    Add Products
</button>

有什么幫助嗎？ 謝謝！

Answer 1

BS 還向需要刪除的 <body> 元素添加了一個類（請參閱此線程）。 試試這個代碼：

$('#myModal').modal('hide');
$(document.body).removeClass('modal-open');
$('.modal-backdrop').remove();

Answer 2

我發現將來自 @JohnRiehl 的代碼變成一個函數使多個模態的事情變得更容易（在代碼中使用一次對所有模態都有效，並且沒有重復的代碼）：

$(".modal").on('hide.bs.modal', function (e) {
    $(document.body).removeClass('modal-open');
    $('.modal-backdrop').remove();
});