[英]Twitter bootstrap modal backdrop not disappearing
我有一個觸發我的模態的按鈕，然后當他們單擊模態內的“添加按鈕”時，我使用了一個jquery函數來檢查模態內的輸入是否有效，然后將這些輸入添加到表內。
問題是單擊“添加按鈕”時。 它確實將輸入追加到表中，並使用$('#add_item_modal').modal('hide');關閉模式$('#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();
但是當我禁用數據背景時，問題還是一樣的。
我已經檢查了我的head標簽，是否存在包括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>
有人能幫助我嗎。 謝謝。
data-backdrop=""並消除班級中的fade效果對我來說很有效。
因此，此<div id="add_item_modal" class="modal fade" role="dialog">
成為<div id="add_item_modal" class="modal" data-backdrop="" role="dialog">
Bootstrap模態一加載就消失，但將背景保留在Safari中
[英]Bootstrap modal disappearing as soon as it loads but leaving the backdrop in Safari
Twitter Bootstrap模式背景並未涵蓋iPad上的整個屏幕
[英]Twitter Bootstrap modal backdrop doesn't cover entire screen on iPad
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.