javascript - Twitter Bootstrap 模式背景不会消失

Question

我有一个触发我的模态的按钮，然后当他们单击模态内的“添加按钮”时，我制作了一个 jquery 函数来检查模态内的输入是否有效，然后输入将被添加到里面 table 。

问题出在单击“添加按钮”时。它确实将输入附加到我的表格中，并使用 $('#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">&times;</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>

谁能帮帮我。谢谢。

Answer 1

data-backdrop=""并删除 fade在我的类(class)为我工作。

所以这个<div id="add_item_modal" class="modal fade" role="dialog">

变成<div id="add_item_modal" class="modal" data-backdrop="" role="dialog">