我有一个按钮触发我的模态，然后当他们点击模态内的“添加按钮”时，我有一个jquery函数来检查模态中的输入是否有效，然后输入将被添加到里面桌子。
问题是单击“添加按钮”时。它会将输入附加到我的表格中并使用$('#add_item_modal').modal('hide');关闭模态，但背景不会消失。
我尝试使用$('#add_item_modal').modal('toggle');，但使用hide时结果相同。
我尝试过使用data-backdrop=""。它确实解决了最初的问题但是当我再次尝试打开模态时，模态只显示一瞬间并立即关闭。
我也尝试过使用
$('#add_item_modal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
但是当我禁用数据背景时问题是一样的。
如果包含bootstrap.min.js和bootstrap.js之类的任何冲突，我已经检查了我的头标记，但是没有。
这是我的js代码
//APPEND THE VALUES INSIDE THE ADD ITEM MODAL TO THE TABLE
$('#create_add_row').click(function(){
var category_id = $('#create_category').val(),
category_text = $('#create_category option:selected').text(),
item,
item_text,
quantity = parseInt($('#create_quantity').val()),
unit = $('#create_unit').val(),
price = parseFloat($('#create_price').val()),
jan = parseInt($('#create_jan').val()),
feb = parseInt($('#create_feb').val()),
mar = parseInt($('#create_mar').val()),
apr = parseInt($('#create_apr').val()),
may = parseInt($('#create_may').val()),
jun = parseInt($('#create_jun').val()),
jul = parseInt($('#create_jul').val()),
aug = parseInt($('#create_aug').val()),
sep = parseInt($('#create_sep').val()),
oct = parseInt($('#create_oct').val()),
nov = parseInt($('#create_nov').val()),
dec = parseInt($('#create_dec').val()),
subtotal = parseFloat(quantity*price).toFixed(2);
var total_qty = jan + feb + mar + apr + may + jun + jul + aug + sep + oct + nov + dec;
//IF THE CATEGORY IS INFRASTRUCTURE OR CONSULTANCY
if((category_id == 1) || (category_id == 4)){
item_text = $('#create_item').val();
}
//ELSE IF THE CATEGORY IS GOODS AND SERVICES
else if(category_id == 2){
item_text = $('#create_item option:selected').text();
}
//ELSE IF THE CATEGORY IS SEMINARS
else{
item_text = $('#create_subcategory option:selected').text();
}
if(category_id == null){
alert('Please select a category');
}
else if($.trim(item_text) == ""){
alert('Please input an item specification');
}
else if(quantity == 0){
alert('Please enter the item quantity.');
}
else if(price == 0){
alert('Please enter the item price');
}
else if(quantity != total_qty){
alert('Please distribute the quantities properly');
}
else{
$('#tablebody').append('<tr id="row'+ id_number +'">' +
'<td id="category'+ id_number +'">'+
'<input id="category_input'+ id_number +'" name="items['+ id_number +'][category]" class="hidden" value="'+ category_id +'"/>'+
category_text +
'</td>'+
'<td id="item'+ id_number +'">'+
'<input id="item_input'+ id_number +'" name="items['+ id_number +'][item]" class="hidden" value="'+ item_text +'"/>'+
item_text +
'</td>'+
'<td id="quantity'+ id_number +'">'+
'<input id="quantity_input'+ id_number +'" name="items['+ id_number +'][quantity]" class="hidden" value="'+ quantity +'"/>'+
quantity +
'</td>'+
'<td id="unit'+ id_number +'">'+
'<input id="unit_input'+ id_number +'" name="items['+ id_number +'][unit]" class="hidden" value="'+ unit +'"/>'+
unit +
'</td>'+
'<td id="price'+ id_number +'">'+
'<input id="price_input'+ id_number +'" name="items['+ id_number +'][price]" class="hidden" value="'+ price +'"/>'+
price +
'</td>'+
'<td id="jan'+ id_number +'">'+
'<input id="jan_input'+ id_number +'" name="items['+ id_number +'][jan]" class="hidden" value="'+ jan +'"/>'+
jan +
'</td>'+
'<td id="feb'+ id_number +'">'+
'<input id="feb_input'+ id_number +'" name="items['+ id_number +'][feb]" class="hidden" value="'+ feb +'"/>'+
feb +
'</td>'+
'<td id="mar'+ id_number +'">'+
'<input id="mar_input'+ id_number +'" name="items['+ id_number +'][mar]" class="hidden" value="'+ mar +'"/>'+
mar +
'</td>'+
'<td id="apr'+ id_number +'">'+
'<input id="apr_input'+ id_number +'" name="items['+ id_number +'][apr]" class="hidden" value="'+ apr +'"/>'+
apr +
'</td>'+
'<td id="may'+ id_number +'">'+
'<input id="may_input'+ id_number +'" name="items['+ id_number +'][may]" class="hidden" value="'+ may +'"/>'+
may +
'</td>'+
'<td id="jun'+ id_number +'">'+
'<input id="jun_input'+ id_number +'" name="items['+ id_number +'][jun]" class="hidden" value="'+ jun +'"/>'+
jun +
'</td>'+
'<td id="jul'+ id_number +'">'+
'<input id="jul_input'+ id_number +'" name="items['+ id_number +'][jul]" class="hidden" value="'+ jul +'"/>'+
jul +
'</td>'+
'<td id="aug'+ id_number +'">'+
'<input id="aug_input'+ id_number +'" name="items['+ id_number +'][aug]" class="hidden" value="'+ aug +'"/>'+
aug +
'</td>'+
'<td id="sep'+ id_number +'">'+
'<input id="sep_input'+ id_number +'" name="items['+ id_number +'][sep]" class="hidden" value="'+ sep +'"/>'+
sep +
'</td>'+
'<td id="oct'+ id_number +'">'+
'<input id="oct_input'+ id_number +'" name="items['+ id_number +'][oct]" class="hidden" value="'+ oct +'"/>'+
oct +
'</td>'+
'<td id="nov'+ id_number +'">'+
'<input id="nov_input'+ id_number +'" name="items['+ id_number +'][nov]" class="hidden" value="'+ nov +'"/>'+
nov +
'</td>'+
'<td id="dec'+ id_number +'">'+
'<input id="dec_input'+ id_number +'" name="items['+ id_number +'][dec]" class="hidden" value="'+ dec +'"/>'+
dec +
'</td>'+
'<td id="subtotal'+ id_number +'">'+ subtotal +'</td>'+
'<td><button id="edit'+ id_number +'" class=\"btn btn-link\" type=\"button\" data-toggle=\"modal\" data-target=\"#edit_item_modal\">Edit</button></td>'+
'<td><button id="delete'+ id_number +'" class=\"btn btn-link\" type=\"button\" data-toggle=\"modal\" data-target="\#delete_item_modal\">Delete</button></td>'+
'</tr>');
//INCREMENT ID NUMBER
id_number++;
$('#add_item_modal').modal('hide');
}
});
这是我的模态
<div id="add_item_modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item</h4>
</div>
<div class="modal-body">
<div id="category_div" class="form-group">
<label>
Category
</label>
<select id="create_category" class="form-control" type="dropdown">
</select>
</div>
<div id="subcategory_div">
</div>
<div id="item_div" class="form-group">
<label>
Item Specification
</label>
<select id="create_item" class="form-control" type="dropdown">
</select>
</div>
<div class="form-group">
<label>
Quantity
</label>
<input id="create_quantity" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group">
<label>
Unit
</label>
<input id="create_unit" class="form-control" type="text"/>
</div>
<div class="form-group">
<label>
Unit Price
</label>
<input id="create_price" class="form-control" type="number" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100"/>
</div>
<label>Schedule/Milestones</label>
<div class="row">
<div class="col-xs-24">
<div class="form-group col-xs-8">
<label>
Jan
</label>
<input id="create_jan" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Feb
</label>
<input id="create_feb" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Mar
</label>
<input id="create_mar" class="form-control" type="number" value="0" min="0"/>
</div>
</div>
<div class="col-xs-24">
<div class="form-group col-xs-8">
<label>
Apr
</label>
<input id="create_apr" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
May
</label>
<input id="create_may" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Jun
</label>
<input id="create_jun" class="form-control" type="number" value="0" min="0"/>
</div>
</div>
<div class="col-xs-24">
<div class="form-group col-xs-8">
<label>
July
</label>
<input id="create_jul" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Aug
</label>
<input id="create_aug" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Sep
</label>
<input id="create_sep" class="form-control" type="number" value="0" min="0"/>
</div>
</div>
<div class="col-xs-24">
<div class="form-group col-xs-8">
<label>
Oct
</label>
<input id="create_oct" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Nov
</label>
<input id="create_nov" class="form-control" type="number" value="0" min="0"/>
</div>
<div class="form-group col-xs-8">
<label>
Dec
</label>
<input id="create_dec" class="form-control" type="number" value="0" min="0"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="create_add_row" type="button" class="btn btn-default">Add Item</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
{table}_id并删除课程中的data-backdrop=""为我工作。
所以fade
变为<div id="add_item_modal" class="modal fade" role="dialog">