iPhone Android Lightbox Lightview Internal Popup
After spending several days trying to modify an "out of the box" internal popup that works on iPhone I could not get any of them to work properly. Lightview, Lightbox or interal popup that works in the iPhone or Adroid. The problem stems from the mobile doctype and the meta tag "viewport."
The following is a lightview lightbox internal popup that works on the iPhone and Android. It does not work on the PalmPre or Blackberry 4.6 or 4.7 OS.
Also note: I wrote this specifically for a client who needed the popup to work on iPhone and Android and you need to include these tags: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">and <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>.
Code Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="css/global.css" type="text/css" media="screen and (min-device-width: 320px)" />
<title>iPhone Box</title>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#iPhoneBox1"><img src="images/1.jpg" width="100" id="iPhoneBox01" alt="happy" /></a>
<div class="overlay" id="iPhoneBox1">
<a href="#close" class="portrait"><img src="images/1.jpg" width="70%" alt="happy" /></a>
<a href="#close" class="landscape"><img src="images/1.jpg" height="70%" alt="happy" /></a>
</div>
</body>
</html>
CSS:
html, body{height:100%;}
body{background-color:#474747;}
img{border:none;}
/* Overylay Setting */
.overlay{width:100%;height:120%;position:absolute;top:50px;left:0;display:none;z-index10000;background:rgba(0,0,0,0.6);}
.overlay a{display:table-cell;vertical-align:middle;text-align:center;}
.overlay img{padding:10px;-webkit-border-radius:10px;background:#fff;}
.overlay:target{display:table;} /* Portrait and Landscape Settings */
a.portrait, a.landscape{display:none;}
@media screen and (max-width: 320px){a.portrait{display:table-cell;}}
@media screen and (min-width: 321px){a.landscape{display:table-cell;}.overlay{height:130%;}}
Explination:
First make sure you include the doctype and meta tag for the viewport (<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> , <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>). The next thing I added in was a ton of <br /> tags for a reason. Every one of these interal popups have suffered from the fatal flaw of drawing the popup at the top of the page after you have clicked on the link. Consequently I have put in the <br /> tags to push the image link down the page of the iPhone to show it jump to the top of the page once clicked. (Note: if you want the popup to appear below the image link, change the position of the overlay tag to relative and push it around by %.)
iPhone Android Orientation:
The next section of the code looks to see is you have turned the phone horizontally or vertically. What is going on is that is that the anchor href, <a href="#iPhoneBox1"><img src="images/1.jpg" width="100" id="iPhoneBox01" alt="happy" /></a> , is initiating a jump to: the div with the id "iPhoneBox1" (<div class="overlay" id="iPhoneBox1">). Then determines which of two anchors to display based if you have the phone in landscape or portrait mode.
If you look at the CSS, notice that the .overlay height is set to 120%. Also notice we have set the target so that we can find the user orientation, then set it to display:table so it centers the object inside (.overlay:target{display:table;}). The next section turns off both ancors in the overlay tag, then reveals the anchor inside of the overlay tag once you click on the anchor with the target (<a href="#iPhoneBox1">). In the CSS of the child anchor it turns the display:table-cell; on to center the object (image) inside the tag. Next if the object is horizontal it changes the height for the overlay tag from 120% to 130%. Webkit determines if you are horizontal based on the devices max-width. Since the iPhone and Android have a width of 320px in portrait mode the max-width is set to 320px. Consequently you write for this by using @media screen and (max-width: 320px){a.portrait{display:table-cell;}} and anything wider by using @media screen and (min-width: 321px){a.landscape{display:table-cell;}.overlay{height:130%;}}.
Next step is that you have to be able to close the popup. You do this by adding a "href="#close" to the anchor. Also note that I have only put the width as a percentage on one anchor and a height as a percentage the other tag because I am grabbing images from an API so I have no control over what size image. Consequetly the I'm letting the browser determine the size based upoe the percentage of the div. So if I have an image I want to draw 70% of the width, the browser automatically figures out the height without distortion (<a href="#close" class="portrait"><img src="images/1.jpg" width="70%" alt="happy" /></a>).