Help with making CSS Modal Work on iPhone

[camerontaylor139]

Hi everyone I have a modal box that I am currently using to help make my app go full screen once the user clicks anywhere on the screen upon this modal appearing. So far this works great and as intended on all devices apart from iPhones. I understand that IOS has different rules in regards to click events and CSS however the online soloutions I have tried so far have not worked and I was hoping someone would be able to tell me what I am doing wrong - Many thanks !

HTML and inline CSS/Javascript Functionality for Modal

<div id="myModal" class="modal" style = "cursor: pointer;" onClick="">
  <!-- Modal content -->
  <div class="modal-content" style = "cursor: pointer;" onClick="">
    <span class="close" onClick="">&times;</span>
    <p style ="text-align: center">Tap Anywhere to Begin</p>
  </div>
</div>
  <div id="Position" style="visibility:hidden; height: 0px;"></div>
  <div style = "cursor: pointer;" onClick="">
  <button id="myBtn" style="visibility:hidden; cursor: pointer;" onClick=""></button>
  </div>
  
 </div>
</body>
</html>
<script>

// Get the modal
$(window).on('load',function(){
         modal.style.display = "block";
    });
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// When the user clicks on <span> (x), close the modal
close.onclick = function() {
	   var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen 
  ;

  rfs.call(el);
  modal.style.height = "0px";
}
// When the user clicks anywhere outside of the modal, close it
modal.onclick = function(event) {
		   var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen ;
  rfs.call(el);
  
    modal.style.height = "0px";
  
}
</script>

CSS for Modal

 /* The Modal (background) */
 .modal {
    /* Hidden by default */
   position: absolute; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   cursor: pointer;
 }
 
 /* Modal Content/Box */
 .modal-content {
   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
   cursor: pointer;
 }
 
 .close{
 	cursor: pointer;
 }

[PaulOB]

Hi,

In ios the console is showing an error for the rfs.call(el) which I assume is because IOS has no fullScreen method. JS is not my thing but I’d guess you need to check that it exists before you call it.

e.g.

	if (rfs) {
    	rfs.call(el);
   	} 
  modal.style.height = "0px";

Full code:

// Get the modal
$(window).on('load',function(){
         modal.style.display = "block";
    });
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// When the user clicks on <span> (x), close the modal
close.onclick = function() {
	   var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen ;
	if (rfs) {
    	rfs.call(el);
   	} 
  modal.style.height = "0px";
}
// When the user clicks anywhere outside of the modal, close it
modal.onclick = function(event) {
		   var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen ;
   if (rfs) {
    rfs.call(el);
   }
    modal.style.height = "0px";
  
}

See the MDN documentation.

Note that your script should be before the closing body tag and not after it as that is invalid (unless it was just a copy and paste error).

I’ll move this post to JS so that you get an expert answer (in case I’m talking rubbish afain) and perhaps get help in refactoring the code

(Off Topic: I would consider telling your users that you are about to go into full screen mode or give them the option as I dislike someone doing that to my screen. Indeed it happened on my wife’s computer and she had no idea had to get out of it and so simply switched the computer off breaking many things in the process ;))