我正在使用 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">×</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 请求完成并成功后手动隐藏模式。 根据他们的website只需输入此代码
$('#myModal').modal('hide')
它关闭了模式,但背景并没有消失。
我试着这样做
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
基地here
它有效,背景消失了,但是除非我刷新页面,否则显示模式的按钮不再起作用。
按钮:
<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>
有什么帮助吗?谢谢!
最佳答案
BS 还向需要删除的
元素添加了一个类(参见 this thread )。试试这个代码:$('#myModal').modal('hide');
$(document.body).removeClass('modal-open');
$('.modal-backdrop').remove();
关于javascript - Bootstrap 4 关闭模式,背景不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50168312/