如何以编程方式将我的模态方向更改为横向

Question

我在react-meteor中有一个父组件和子组件，其中父组件显示单击按钮打开子组件中呈现的模式的按钮

父组件看起来像这样：

...........
          <child component />
     ..........

子组件看起来像这样：

<Modal
   header='Modal Header'
   trigger={<Button>OR ME!</Button>}>
   <p>Lorem </p>
</Modal>

我的项目中的所有屏幕都需要处于potrait模式，除了我的模态。 我在模态中使用流动播放器播放视频。对于移动版本，我希望我的模态在打开后立即进入“横向”模式。 （或）我希望我的网络应用程序在我的模态打开后立即进入横向模式，并在模态关闭时返回“potrait”模式。我尝试过使用window.screen.orientation.lock和window.screen.lockOrientation(orientation)  但两者都不起作用，我甚至尝试过使用css transform: rotate(0.25turn)，但在我调整模态大小height:100vw(width here) width:100vh(height here)后使用它时，模态会被转换到右上角并且去它的某些部分位于屏幕下方。我该如何解决这个问题？

Answer 1

我使用了transform-origin CSS属性来解决问题。我已经将视口功能单元（vh和vw）用于适用于不同维度（响应）的变换原点。