React项目中如何将Bootstrap Modal固定在屏幕右下角？

• Bootstrap 默认的.modal类会默认占满整个视口（宽高均为100%），你给该外层容器设置bottom: 0、right: 0定位不会生效，因为容器本身已经铺满全屏。
• 控制弹框实际展示位置的是.modal内部的.modal-dialog元素，该元素默认是居中对齐，所以你修改外层容器样式不会改变弹框位置。
• 你之前直接给外层.modal设置30%宽度后，外层容器变成30%宽、100%高，内部的.modal-dialog仍在该容器内垂直居中，就出现了你截图里的异常效果。

你可以选择以下任意一种方式实现右下角定位，无需设置固定margin偏移：

方案1：修改外层容器对齐规则 #

直接修改.modal的flex对齐属性，让内部弹框自动靠右下角展示：

<div 
  className="modal fade" 
  style={{ justifyContent: 'flex-end', alignItems: 'flex-end' }}
  id="updateCategory" 
  tabIndex="-1" 
  aria-labelledby="exampleModalLabel2" 
  aria-hidden="true"
>
  {/* 仅需给内部modal-dialog设置宽度和边距即可 */}
  <div className="modal-dialog" style={{ width: '30%', margin: '1rem' }}>
    <div className="modal-content">
      {/* 你的弹框内容 */}
    </div>
  </div>
</div>

方案2：直接定位内部弹框元素 #

将定位属性加在实际控制弹框位置的.modal-dialog元素上：

<div 
  className="modal fade" 
  id="updateCategory" 
  tabIndex="-1" 
  aria-labelledby="exampleModalLabel2" 
  aria-hidden="true"
>
  <div 
    className="modal-dialog" 
    style={{ position: 'fixed', bottom: 0, right: 0, width: '30%', margin: '1rem' }}
  >
    <div className="modal-content">
      {/* 你的弹框内容 */}
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user16137336