Problems with displaying modal popups in mobile browser and on resizing browser window
I have some problems with a modal popup dialog on a site that I'm building. This is the site: www.notforsale.magalidb.com
These links all have a modal popup behind them:
- "Lisez la version en ligne"
- "Read the online version"
- "Conditions"
- "Contactez la redaction"
- "Contacteer de redactie"
- "Contact the redaction"
The problems:
- When I browse to the website via Safari mobile (on iPhone or iPad) and I click on any of the above mentioned links, a popup appears. But when I zoom in, the popup jumps away (mostly to the lower right of the screen). So I can't zoom in on whatever is written in that popup.
- When I browse to the website via regular browsers such as Safari, Opera, Firefox, Chrome or Internet Explorer (didn't test on IE though), and I click on "Bekijk de online versie", then I get to see a larger popup that holds a magazine which can be flipped like a book. If I then resize the browser window, this popup jumps to the lower right of the screen. I then have to close the popup and reopen it in order to see it centered again.
What I want:
- What do I need to edit in my existing code to make my popups remain centered? Even in mobile browsers?
- How do I prevent this particular popup from jumping to the corner of the browser? I didn't write it differently than the other popups, the only difference is the width and height. But I don't see why it always jumps away, unlike the other popups...
If anyone has a possible solution, please do share. This is quite urgent, since I find that my client deserves a website that functions correctly.
The code: popup.js
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a.modal').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height() ;
var winW = $(window).width() ;
//Set the popup window to center
$(id).css('margin-top', winH / 2-$(id).height()/2);
$(id).css('margin-left', winW / 2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('margin-top', winH/2 - box.height()/2);
box.css('margin-left', winW/2 - box.width()/2);
});
});
The code (example, please see site source for full code): index.php
<!DOCTYPE html>
<html>
<head>
<title>NOTFORSALE, the most exclusive car magazine</title>
<link href="stylesheets/default.css" rel="stylesheet" type="text/css">
<!-- jQuery library: -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<!-- Cycle plugin: -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/launch_scripts.js"></script>
<script type="text/javascript" src="scripts/popup.js"></script>
</head>
<body>
<div id="main">
<div id="main-container">
<div id="content">
<div class="content-left">
<div class="box" id="box1">FR</div>
<br><br>
<a href="#dialogFR" class="modal">
Telechargez pour iPad ou Android tablet</a>
<br><br>
<a href="#dialogFR" class="modal">Lisez la version en ligne</a>
</div>
<div class="content-center">
<div class="box" id="box2">NL</div>
<br><br>
<a href="scripts/notforsale_DL_NL.php" target="_blank">
Download voor iPad of Android tablet</a>
<br><br>
<a href="#dialogNL" class="modal">Bekijk de online versie</a>
</div>
<div class="content-right">
<div class="box" id="box3">EN</div>
<br><br>
<!--
<a href="scripts/notforsale_DL_EN.php" target="_blank">
-->
<a href="#dialogEN" class="modal">
Download for iPad or Android tablet</a>
<br><br>
<a href="#dialogEN" class="modal">Read the online version</a>
</div>
</div>
</div>
</div>
!-- From here, the popups start -->
<div id="boxes">
<div id="dialogFR" class="window popup-windows" style="width: 600px !important; height: 250px !important;">
<a href="#" class="close"><img class="cbc" src="images/close.png" alt="close"></a>
<?php include 'comingsoonFR.php'; ?>
</div>
<div id="dialogNL" class="window popup-windows" style="width: 1200px !important; height: 510px !important;">
<a href="#" class="close"><img class="cbm" src="images/close.png" alt="close"></a>
<?php include 'magazineNL.php'; ?>
<div style="z-index:20; margin: -80px; text-align: center;">
<a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>
<br>
<a href="scripts/notforsale_DL_NL.php" target="_blank">Download voor iPad of Android tablet</a>
</div>
</div>
<div id="dialogEN" class="window popup-windows" style="width: 600px !important; height: 250px !important;">
<a href="#" class="close"><img class="cbc" src="images/close.png" alt="close"></a>
<?php include 'comingsoonEN.php'; ?>
</div>
<div id="mask"></div>
</div>
</body>
</html>
The code (only showing CSS related to the popups): default.css
/* Popup design */
#mask {
z-index:9000;
position:absolute;
left:0;
top:0;
background-color:#000;
display:none;
}
#boxes .window {
width: 1200px !important;
height: 510px !important;
z-index:9999;
position:fixed;
left:0;
top: 0;
display:none;
padding:20px;
background: white;
border: 1px solid #4D4D4D;
border-radius: 15px;
box-shadow: 0 0 5px black;
}
.popup-windows{
background: #4D4D4D !important;
border: 1px solid white !important;
font-size: 10pt !important;
font-weight: normal !important;
}
#boxes #dialog {
width: 600px;
height: 500px;
padding:10px;
background-color: #ffffff;
}
.cbm{ /* Short for CloseButtonMagazine */
margin-top: -45px;
margin-left: 1196px;
position: fixed;
}
.cbc{ /* Short for CloseButtonContact */
margin-top: -45px;
margin-left: 600px;
position: fixed;
}
I know this might be a lot of text for a question, but I really want to give as much details as I can, in order to make it easier for you to see the whole bundle. As mentioned earlier, you can see the website and test out the popup issues. I use Google Chrome for testing it out, and if all works well there, I check out the site in other browsers to make it compatible.
Also, I think the jumping popup issue is solvable. I saw other tutorials for making modal popups and those work just fine in my mobile browsers, but I can't afford having to recode all those popups. Unless I can edit the existing code and shorten it, while remaining the functionality and without having to edit anything in index.php. Anyway... Please just take a look at it. It might be easier to just meddle with it in-browser, inspecting the elements and such... It's quite a lot of code.
Any help is GREATLY appreciated!
Answer
set your modal popup to position: fixed and height/width 100%, that should cover up the whole screen, and you won't have to worry about window resizing.
for your individual popup boxes, set them to position: fixed as well, and use top/left to position instead of margins. As for zooming, I'd have to see this in action to get a better grasp of the effect you're going for.