您问题的简短答案是：* “您不更改Bootstrap 3模态的显示属性”。
查看您的代码，我猜您希望更改其display属性的原因是因为您希望将其垂直居中。
垂直居中Bootstrap 3模态并不像看起来那么容易，至少有两个原因：
首先也是最重要的，Bootstrap在显示/隐藏display属性时会动态更改它的属性。
然后你就有了一个不同的，甚至更微妙的问题。把一个高个子放在一个矮个子的父对象中，用flex，会使子对象的顶部和底部超出父对象。当父对象的大小是视口的大小时，你最终不能滚动到子对象的开始。
简而言之，当模态页面容纳的内容超过了 windows 的高度时，你就不能再滚动到它的顶部了，这是一个巨大的可访问性问题。
Bootstrap 3模态的一个不错的解决方案是限制模态的高度（确保它永远*不高于视口），并在需要时在模态的主体上放置一个滚动条。
具体操作如下：

@media (min-height: 270px) {
  .modal-dialog {
    height: calc(100vh - 20px);
    display: flex;
    align-items: center;
  }
  .modal-content {
    width: inherit;
    max-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
  }
  .modal-footer,
  .modal-header {
    flex-grow: 0;
  }
  .modal-body {
    flex-grow: 1;
    overflow-y: auto;
  }
  @media (min-width: 768px) {
    .modal-dialog {
      height: calc(100vh - 60px);
    }
    .modal-content {
      max-height: calc(100vh - 60px);
    }
  }
}

查看其工作情况：
第一次
为什么要包含在min-height媒体查询中？因为它在高度低于200px的视口中渲染效果不佳（由于元素高度有限，.modal-body内容变得难以访问）。
但是我们并不希望这些屏幕垂直居中，不是吗？主要的问题是可访问性。如果我们不干涉的话，Bootstrap 3提供了它。