Twitter引导模式背景不消失

Question

I have a button that triggers my modal and then when they click the "Add Button" inside the modal I have a made a jquery functions to check if the inputs inside the modal are valid which will then the inputs will be added inside the table.

The problem is when the "Add Button" is clicked. It does append the inputs inside my table and closes the modal with $('#add_item_modal').modal('hide'); but the backdrop doesn't disappear.

I tried using $('#add_item_modal').modal('toggle'); but the result is the same when using hide .

I have tried using data-backdrop="" . It does solve the initial problem but when I try to open the modal again, the modal shows just for a split second and closes immediately.

I have also tried using

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

but the problem is the same when I disabled the data-backdrop.

I already checked my head tag if there are any conflicts like including both bootstrap.min.js and bootstrap.js but there are non.

This is my js code

//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');
}
});

And this is my modal

<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>

Can someone help me please. Thanks.

Answer 1

data-backdrop="" and removing fade in my class worked for me.

so this <div id="add_item_modal" class="modal fade" role="dialog">

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