bootstrap modal backdrop remain static when scroll

Question

I'm having a problem with the bootstrap modal backdrop when i click the button the modal show's up and i created a function which will append when i select something on my select tag so the modal itself will resize but that background remains the same which leaves a space when i scroll..

so here is my modal

<div class="modal fade" id="accounting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Create Transaction</h4>
          </div>
          <div class="modal-body">

             <form role="form" id="form-transaction">

                <div class="form-group col-sm-12">
                    <label for="transact_2" class="col-sm-12">Transaction</label>
                    <div class="col-sm-12">
                      <select class="form-control" id="entry_2" name="entry_2">
                        <option selected="true" disabled="">Select Entry</option>
                        <option value="credit">Credit</option>
                        <option value="debit">Debit</option>
                      </select>

                    </div>
                </div>
                <div id="cash_receiver">

                </div>

                <div class="form-group">
                  <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                  <button class="btn btn-success" type="submit">Save changes</button>
                </div>

            </form>

          </div>
      </div>
  </div>
</div>

and this is my script for appending the input box based on the data selected

$(document).on('change', '#entry_2', function(){
    entry_2= $(this).val();

    if(entry_2== 'cash'){
        $('#accounting').find('#cash_receiver').addClass('form-group col-sm-12');
        $('#accounting').find('#cash_receiver').html('<label for="manager-2" class="col-sm-12">Name of Receiver</label>'+
                    '<div class="col-sm-12">'+
                      '<input type="text" class="form-control" id="receiver_2" name="receiver_2" placeholder="Name of Receiver">'+
                      '<p class="help-block"></p>'+
                    '</div>');
    }else{
        $('#accounting').find('#cash_receiver').addClass('form-group col-sm-12');
        $('#accounting').find('#cash_receiver').html('<label for="manager-2" class="col-sm-12">Name of Bank</label>'+
                    '<div class="col-sm-12">'+
                      '<input type="text" class="form-control" id="receiver_2" name="receiver_2" placeholder="Name of Bank">'+
                      '<p class="help-block"></p>'+
                    '</div>');
    }
});

as you can see on the image that is what happens when the input box appended.. when i scroll down the backdrop remains static... i use data-backdrop=false earlier and what happen is the background opacity lost. is there a way to auto fill the background when the modal resize?..

Answer 1

All you should do is to apply the following CSS to the modal:

.modal{
  position:fixed;
  z-index:9999; /* On top of everything */
}

The Modal will now not scroll with the background. You can also add the following:

.modal{
   background-color:rgba(0,0,0,0.5); /* To darken background */
}

Now, add another element inside the .modal like in:

<div class="modal"
  <div class="content">
     TEXT
  </div>
</div>  

You can add this now:

.content{
   background-color:#fff;
   width:500px; /*on large screens*/
   max-width:100%; /*on small screens*/
}

You may now get the desired effect. Please provide more details so that I can help you better.