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

Question

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

父组件看起来像这样：

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

子组件看起来像这样：

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

我项目中的所有屏幕都需要处于 potrait 模式，除了我的模态。我正在 modal.For 移动版中使用 flowplayer 播放视频我希望我的模态一打开就进入 'landscape' 模式。（或）我希望我的网络应用程序在我的模态打开后立即进入横向模式，并在模态关闭时返回 '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）作为变换原点，它适用于不同的维度（响应）。

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

how to programmatically change the orientation of my modal to landscape

css

orientation

meteor

reactjs