使用 JavaScript 在纵向方向上打开引导模式答案

【问题标题】：Opening a bootstrap modal on Portait orientation using JavaScript使用 JavaScript 在纵向方向上打开引导模式
【发布时间】：2021-09-08 16:19:00
【问题描述】：

如果屏幕方向是“纵向”如何打开模态，如果方向是“横向”如何隐藏模态

这是我当前的脚本。

但是如果页面最初以纵向模式加载，这将不起作用..

<script>
    window.addEventListener("orientationchange", function() {
        if(screen.availHeight > screen.availWidth){
            $( '#oMsg' ).modal('show');  
        } else {
            $( '#oMsg' ).modal('hide');
        } 

    }, false);
    </script>

更新

所以我现在在 Nitin 和 Naveen 的帮助下更新了我的代码

<script>
    screen.orientation.addEventListener('change', function(e) {
        scrFunction();

    }, false);
    </script>
    <script>
    function scrFunction() {
        if(screen.availHeight > screen.availWidth){
            $( '#oMsg' ).modal('show');  
        } 
    }
    </script>

我也改变了我的身体

<body onload="scrFunction()">

但是现在我的问题是即使它检测到页面加载时的方向，一旦我将方向更改回横向，模型仍然存在..它没有删除..

【问题讨论】：

标签： javascript html bootstrap-4 model

【解决方案1】：

你可以使用<body onload="myFunction()">

（或）

在文档上添加事件“加载”监听器。

（或）

window.onload vs document.onload

【讨论】：

@VeenaviAnutthara 似乎你忘记了应该是其他的“隐藏”逻辑。

【解决方案2】：

window.orientationchange 已弃用。请改用screen.orientation.onchange。

window.addEventListener('DOMContentLoaded', (event) => {

  toggleModalForScreen();

  screen.orientation.addEventListener('change', function(e) {
    toggleModalForScreen();
  });
});


function toggleModalForScreen() {
  if (screen.availHeight > screen.availWidth) {
    $('#oMsg').modal('show');
  } else {
    $('#oMsg').modal('hide');
  }
}

文档：https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks

【讨论】：

也更新了答案
当方向变为横向时，模型仍然存在..一旦出现就不会删除
将e 传递给函数并检查console.log(e);。查看e.type 是否不同并相应切换