滚动

Question

我在与引导模式背景下一个问题，当我点击按钮的模态展示的了，我创造了当我选择在我的选择标签的东西，这将追加一个功能，使模态本身会调整，但这样的背景下仍然是当我滚动时留下空间的那个......

所以这是我的模态

<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{
   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*/
}

您现在可以获得所需的效果。请提供更多详细信息，以便我们更好地为您提供帮助。