Opening a bootstrap modal on Portait orientation using JavaScript

Question

How to open modal if the screen orientation is "Portrait" and hide the modal if he orientation is "Landscape"

This is my current script.

But this is not working if the page loads in portrait mode initially..

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

    }, false);
    </script>

UPDATE

So I've updated my code as follows now with the help of Nitin and Naveen

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

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

Also I changed my body

<body onload="scrFunction()">

But now my issues is even though it detects the orientation on page load, once I changed orientation back to Landscape, model remains there.. it's not removing..

score 1 · Answer 1 · answered Sep 08 '21 at 16:29

1

You can use <body onload="myFunction()">

(or)

add event "load" listener on document.

(or)

window.onload vs document.onload

answered Sep 08 '21 at 16:29

Nitin Kumar

1,448
2
13
19

@VeenaviAnutthara seems like you forgot the "hide" logic which is supposed to be else. – Nitin Kumar Sep 08 '21 at 17:33

naveen · Answer 2 · 2021-09-08T16:50:31.980

1

window.orientationchange is deprecated. Use the screen.orientation.onchange instead.

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');
  }
}

Documentation: https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks

edited Sep 08 '21 at 16:50

answered Sep 08 '21 at 16:33

naveen

53,448
46
161
251

Updated answer too – naveen Sep 08 '21 at 16:51
Still when the orientation changed to landscape, the model is there.. it's not removing once it comes up – Veenavi Anutthara Sep 08 '21 at 16:54
Pass `e` to the function and check `console.log(e);`. See if `e.type` is different and toggle accordingly – naveen Sep 08 '21 at 18:00

Opening a bootstrap modal on Portait orientation using JavaScript

2 Answers2