我正在构建的网站上的模式弹出对话框存在一些问题。这是网站：www.notforsale.magalidb.com
这些链接后面都有一个模式弹出窗口：
- “Lisez la version en ligne”
- “阅读在线版本”
- “条件”
- “联系编辑”
- “编辑联系人”
- “联系编辑”
问题：
- 当我通过 Safari 手机（在 iPhone 或 iPad 上）浏览网站并单击上述任何链接时，会出现一个弹出窗口。但是当我放大时，弹出窗口会跳开（主要是在屏幕的右下方）。所以我无法放大该弹出窗口中写的任何内容。
- 当我通过 Safari、Opera、Firefox、Chrome 或 Internet Explorer 等常规浏览器浏览网站时（虽然没有在 IE 上测试），然后单击“Bekijk de online versie”，然后我会看到一个更大的弹出窗口里面有一本可以像书一样翻动的杂志。如果我然后调整浏览器窗口的大小，这个弹出窗口会跳到屏幕的右下角。然后我必须关闭弹出窗口并重新打开它才能看到它再次居中。
我想要的是：
- 我需要在现有代码中编辑什么以使弹出窗口保持居中？即使在移动浏览器中？
- 如何防止这个特定的弹出窗口跳到浏览器的角落？我没有写它与其他弹出窗口不同，唯一的区别是宽度和高度。但我不明白为什么它总是跳开，不像其他弹出窗口......
如果有人有可能的解决方案，请分享。这非常紧迫，因为我发现我的客户应该拥有一个正常运行的网站。
代码：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);
});
});
代码（示例，完整代码请参见站点源代码）：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>
代码（仅显示与弹出窗口相关的 CSS）：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;
}
我知道这可能是一个问题的很多文本，但我真的想提供尽可能多的细节，以便让您更容易看到整个捆绑包。如前所述，您可以查看网站并测试弹出问题。我使用谷歌浏览器对其进行测试，如果一切正常，我会在其他浏览器中查看该站点以使其兼容。
另外，我认为跳跃弹出问题是可以解决的。我看到了其他制作模态弹出窗口的教程，这些教程在我的移动浏览器中工作得很好，但我不能重新编码所有这些弹出窗口。除非我可以编辑现有代码并缩短它，同时保留功能并且无需编辑 index.php 中的任何内容。无论如何...请看看它。在浏览器中干预它可能更容易，检查元素等等......这是相当多的代码。
任何帮助是极大的赞赏！