javascript - 滚动时 Bootstrap 模式背景保持静态

Question

当我单击模态显示按钮时， Bootstrap 模态背景出现问题，我创建了一个函数，当我在我的选择标签上选择某些内容时，该函数将附加，因此模态本身将调整大小，但背景仍然是同样，当我滚动时会留下一个空间..

这是我的模式

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

这是我根据所选数据附加输入框的脚本

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

正如您在图像上看到的那样，当附加输入框时会发生什么......当我向下滚动时背景保持静态......我之前使用了 data-backdrop=false 并且发生了什么是背景不透明度丢失。有没有办法在模态调整大小时自动填充背景？..

Answer 1

您应该做的就是将以下 CSS 应用于模态:

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

Modal 现在不会随背景一起滚动。您还可以添加以下内容:

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

现在，在 .modal 中添加另一个元素，如:

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

您现在可以添加:

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

您现在可能会得到想要的效果。请提供更多详细信息，以便我更好地帮助您。