title: bootstrap modal backdrop remain static when scroll
body: <p>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..</p>
  
  <p>so here is my modal</p>
  
  <pre><code>&lt;div class="modal fade" id="accounting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class="modal-title"&gt;Create Transaction&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
  
               &lt;form role="form" id="form-transaction"&gt;
  
                  &lt;div class="form-group col-sm-12"&gt;
                      &lt;label for="transact_2" class="col-sm-12"&gt;Transaction&lt;/label&gt;
                      &lt;div class="col-sm-12"&gt;
                        &lt;select class="form-control" id="entry_2" name="entry_2"&gt;
                          &lt;option selected="true" disabled=""&gt;Select Entry&lt;/option&gt;
                          &lt;option value="credit"&gt;Credit&lt;/option&gt;
                          &lt;option value="debit"&gt;Debit&lt;/option&gt;
                        &lt;/select&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="cash_receiver"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                    &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
                    &lt;button class="btn btn-success" type="submit"&gt;Save changes&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/form&gt;
  
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my script for appending the input box based on the data selected </p>
  
  <pre><code>$(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('&lt;label for="manager-2" class="col-sm-12"&gt;Name of Receiver&lt;/label&gt;'+
                      '&lt;div class="col-sm-12"&gt;'+
                        '&lt;input type="text" class="form-control" id="receiver_2" name="receiver_2" placeholder="Name of Receiver"&gt;'+
                        '&lt;p class="help-block"&gt;&lt;/p&gt;'+
                      '&lt;/div&gt;');
      }else{
          $('#accounting').find('#cash_receiver').addClass('form-group col-sm-12');
          $('#accounting').find('#cash_receiver').html('&lt;label for="manager-2" class="col-sm-12"&gt;Name of Bank&lt;/label&gt;'+
                      '&lt;div class="col-sm-12"&gt;'+
                        '&lt;input type="text" class="form-control" id="receiver_2" name="receiver_2" placeholder="Name of Bank"&gt;'+
                        '&lt;p class="help-block"&gt;&lt;/p&gt;'+
                      '&lt;/div&gt;');
      }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pmvtP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pmvtP.png" alt="enter image description here"></a></p>
  
  <p>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 <code>data-backdrop=false</code> earlier and what happen is the background opacity lost. is there a way to auto fill the background when the modal resize?..</p>