Modal not displaying outside of dropdown menu in Safari

Modal not displaying outside of dropdown menu in Safari
0.0 0

#1

Hi,

In a personal website I am trying to develop, I have numerous modals with youtube videos that are intended to be linked from drop down menus.

It all works perfectly in Chrome but unfortunately in Safari the modals appear only partially and are stuck inside the dropdown menu. The modal I’ve used is modified but uses a W3Schools stylesheet. The code below is simplified so the page might look a bit odd but it demonstrates the problem. If you click on, for example, the drop down menu for ‘Guitar Videos’ and select ‘Coming Down From Rising Fawn’, everything works perfectly well in Chrome but not in Safari. Not sure I can put the code in codepen or JSFiddle because of the stylesheet.

A few members here have already helped me with two other issues concerning these modals so thanks again. Any help would be greatly appreciated. Regards, Alex

<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
	
	<title>Alex Giordano</title>
	<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<script src="https://use.fontawesome.com/b43fc68858.js"></script>
    <style>
      /*flexbox used to create sticky footer*/
    html, body {
      height: 100%;
    }
    body {
	  display: flex;
      flex-direction: column;
      background-image: url("picassobackgroundfinal.jpg"); 
	  background-size:cover; 
	  font-family: 'Oxygen', sans-serif;
	  margin: 0 0 0 0;
	}   
   .content {
      flex: 1 0 auto;
    }
   .footer {
      flex-shrink: 0;
      font-size: 15px; 
      color: #FFFFE0; 
      margin-bottom: 15px; 
      margin-left: 15px;
    }   
    h1 {
      color: #FFFFE0; 
      margin: 35px 35px 35px 35px;
    }
	p {
	  font-size: 25px; 
	  color: #FFFFE0; 
	  margin: 15px 15px 0 15px;
	}  
	.navbar {
	  font-size:0;
	}
	.navbar a {
	  display: inline-block;
	  color: black;  
	  background-image: url("blue.jpg");
	  text-align: center;
	  padding: 15px 15px 15px 15px;
	  text-decoration: none;
	  font-size: 25px;
	}
	.navbar a:hover {
	  background-image: url("yellow.jpg");
	  color: black;  
	  font-size: 25px;
	}
	.navbar a.active {  
	  background-image: url("grey.jpg"); 
	  color: black; 
	  font-size: 25px;
	}
    .dropdownbutton {
      display: inline-block;
      background-image: url("blue.jpg");
      color: black;
      padding: 15px 15px 15px 15px;
      font-size: 25px;
      border: none;
      cursor: pointer;
    } 

   .dropdowndiv {
      position: relative;
      display: inline-block;
    }
   .dropdown-content {
      display: none;
      position: absolute;
      background-image: url("blue.jpg");
      min-width: 100%;
      max-height: 470px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      overflow-y: scroll;
    }
   .dropdown-content .dropdownlink {
      color: black;
      padding: 8px 8px 8px 8px;
      text-decoration: none;
      display: block;
      text-align: left;
      font-size: 18px;  
    }
   .dropdown-content .dropdownlink:hover {
       background-image: url("yellowdarker.jpg"); 
       font-size: 18px;
    }
   /*Show the dropdown menu on hover*/
   .dropdowndiv:hover .dropdown-content {
      display: block;
   }
   /*Keep chaning backround image of dropdown button when dropdown conent shown*/
   .dropdowndiv:hover .dropdownbutton {
      background-image: url("yellow.jpg");
    }     
	.share {
      background-image: url("black.jpg");
	  display: inline-block;
	  margin: 15px 15px 0px 0px;
	  padding: 15px 15px 15px 15px;
	}
	i {  
	  display: inline-block;  
	}
	i:hover {
	  color: #FFFFE0; 
	}
	.sharelabel {
	  padding-right: 15px;
      font-size: 25px; 
      color: #FFFFE0; 
      text-align: center;
	}
	.facebook {
	  display: inline-block;
	  padding-right: 15px; 
      color: #708BC7;
	}
	.mail {
	  display: inline-block;
      color: #BFEE90;
	}
	iframe {
	  display: block; 
	  margin: 15px auto 0 auto;
	}
    /*Removed modal box, i.e. background and border*/
   .modal-content {
      background-image: transparent;
      margin: 15% auto; /*15% from top and centered*/
      padding: 0px 0px 0px 0px;
      width: 560px; 
      height: 315px; /*Matches width and height of iframe but made transparent*/
    } 
   .close {
      color: #aaa;
      float: right;
      font-size: 18px;
      color: #FFFFE0;
    }
    .close:hover, .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
    
    </style>
    

  </head>   

  <body>
    <div class="content">
	  <h1>Alex Giordano &#8211; Guitarist
	  </h1>
	
      <div  class="navbar">
        <a href="index.html" class="active">Home</a>
	    <a href="aboutpage.html">About</a>
	    <a href="contactpage.html">Contact</a>
	  
        <div class="dropdowndiv">
          <span class="dropdownbutton">Guitar videos <i class="fa fa-caret-down arrow" style="color:black"></i></span>
            
          <div class="dropdown-content">
            <a class="dropdownlink" href="guitarvideospage.html">All</a>
              
            <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id01').style.display='block'">Coming Down From Rising Fawn</a>
              <!--modal-->
              <div id="id01" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id01').style.display='none'; stopVideo(modalA)" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/NCHEpoob-pE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
                  </iframe>
                </div>
              </div>
          
            <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id02').style.display='block'">Give Me Back My 15 Cents</a>
              <!--modal-->
              <div id="id02" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id02').style.display='none'; stopVideo(modalB)" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/0VMvU7NYWd0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	              </iframe>	
                </div>
              </div>
                
            <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id03').style.display='block'">Improv in E Minor</a>
              <!--modal-->
              <div id="id03" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id03').style.display='none'; stopVideo(modalC)" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/3QPnmoMceqc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	              </iframe>	
                </div>
              </div>     
            </div>
          </div>
           
	  <div class="dropdowndiv">
        <span class="dropdownbutton">Mandolin videos <i class="fa fa-caret-down" style="color:black"></i></span>
        <div class="dropdown-content">
          <a class="dropdownlink" href="mandolinvideospage.html">All</a>
           
          <!--trigger modal--> 
          <a class="dropdownlink" onclick="document.getElementById('id11').style.display='block'">Bach Cello Suite No 1 in G Major</a>
          <!--modal-->
          <div id="id11" class="w3-modal w3-animate-opacity">
          <!--modal content-->
          <div class="modal-content">
            <span onclick="document.getElementById('id11').style.display='none'; stopVideo(modalK)" class="close">&times;</span>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/X0d7HwU7DMY" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	        </iframe>	
          </div>
        </div>
            
            
          <!--trigger modal--> 
          <a class="dropdownlink" onclick="document.getElementById('id12').style.display='block'">Boatin' Up Sandy</a>
          <!--modal-->
          <div id="id12" class="w3-modal w3-animate-opacity">
          <!--modal content-->
          <div class="modal-content">
            <span onclick="document.getElementById('id12').style.display='none'; stopVideo(modalL)" class="close">&times;</span>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/2npMebwFfi8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	        </iframe>
          </div>
        </div>
      </div>
    </div>
            
    <div class="dropdowndiv">
      <span class="dropdownbutton">'Modern Method' videos <i class="fa fa-caret-down" style="color:black"></i></span>
      <div class="dropdown-content">
        <a class="dropdownlink" href="modernmethodvideos.html">TBA</a>
      </div>
    </div>
  </div>
  <p>This website archives my musical endeavours, is a first attempt at HTML/CSS coding, and may be used as a reference point for any guitar teaching. Thanks very much for visiting.
  </p>
  <div class="share">
    <span class="sharelabel">Share</span>
    <span class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=https%3A%2F%2Falexgiordano.github.io%2F&display=popup&ref=plugin&src=share_button&ext=1517140430&hash=Aea7DERbI1ae86DO"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
    </a></span>  
     <span class="mail"><a href="mailto:?&subject=Howdy&body=Dear Sir/Madam%0D%0A%0D%0AThis site may be of interest:%0D%0A%0D%0Ahttps://alexgiordano.github.io %0D%0A%0D%0ABest Regards,%0D%0A%0D%0A"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
     </a></span>
   </div>
 </div>
      
 <footer class="footer">&copy; Copyright 2018 | Background by Pablo Picasso</footer>

 <script>
 function stopVideo(modal) {
  var currentIframe = modal.querySelector('.modal-content > iframe');
  currentIframe.src = currentIframe.src;
}      
      
      /*Get modal*/
    var modalA = document.getElementById('id01');

    var modalB = document.getElementById('id02');

    var modalC = document.getElementById('id03');
    
    var modalK = document.getElementById('id11');
    
    var modalL = document.getElementById('id12');

     
    /*Close on clicking outside modal*/
    window.onclick = function(event) {
  
    if (event.target == modalA) {
        modalA.style.display = "none"; stopVideo(modalA);
    } 
    if(event.target == modalB) {
        modalB.style.display = "none"; stopVideo(modalB);
     }
    if (event.target == modalC) {
        modalC.style.display = "none"; stopVideo(modalC);
    } 
    if (event.target == modalK) {
        modalK.style.display = "none"; stopVideo(modalK);
    } 
    if (event.target == modalL) {
        modalL.style.display = "none"; stopVideo(modalL);
    } 
  }

      
</script>

  </body>
</html>

#2

Codepen has a blog entry about adding external resources to pens:

Are you getting any errors or warnings in the dev console?


#3

Thanks. Turns out it was working in codepen. Just that when you open a modal, you then need to make sure to scroll down in order to see it as it is appearing in the centre of the browser. Here is the link:

Not getting any errors or warning as far as I’m aware but i perhaps don’t even know what the dev console is…

It’s working in codepen by the way, just not safari.


#4

Are you using your safari browser to view the Codepen? If so, it is working in safari. Look at your browser’s console (see below for how to in safari). You should see a bunch of errors showing.


#5

Hi Randell,

Yes, have been using Safari on a friend’s macbook and it does’t work using that browser. Unfortunately, cannot see any relevant errors in the console, although it appears to be called the ‘web inspector’ in this version of Safari (10.1.2). Odd that no problems in Chrome. Regards, Alex