1
问题我有一些问题对我建立一个网站一个模式弹出对话框。这是网站：www.notforsale.magalidb.com在移动浏览器中显示的模态弹出窗口和调整浏览器窗口
这些链接都在他们身后模式弹出：
- “Lisez LA版EN LIGNE”
- “阅读网络版”
- “条件”
- “Contactez拉密文”
- “Contacteer德redactie”
- “联系新版本”
的问题：
- 当我通过Safari移动浏览的网站（在iPhone或iPad），我点击任何上述链接，弹出出现。但是，当我放大，弹出跳走（主要是在屏幕的右下角）。所以我无法放大任何在该弹出窗口中写入的内容。
- 当我浏览到通过普通浏览器如Safari浏览器，歌剧，火狐，Chrome或Internet Explorer（IE浏览器没有测试虽然）的网站，我点击“Bekijk德在线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;
}
我知道这可能是一个问题的很多文本，但我真的想给我尽可能多的细节，以便更容易地看到整个包。如前所述，您可以查看该网站并测试弹出式问题。我使用Google Chrome进行测试，如果一切正常，我会在其他浏览器中查看该网站以使其兼容。
另外，我认为跳跃弹出问题是可以解决的。我看到了其他教程用于制作模式弹出窗口，而且在我的移动浏览器中工作得很好，但我无法负担重新编码所有这些弹出窗口。除非我可以编辑现有的代码并缩短它，同时保持功能，而不必编辑index.php中的任何内容。无论如何...请看看它。只是在浏览器中插入内容，检查元素等等可能会更容易。这是相当多的代码。
任何帮助非常感谢！
你需要停止使用JavaScript来做可视布局，这是这里的主要问题。你的问题是这样做的直接结果。 – mystrdat
我真的不明白你在这里想说什么。为什么我应该停止使用JavaScript？那么你有更好的主意吗？ – Magali
这是不好的做法 - 在这种情况下，您不需要从JavaScript获取宽度，高度，位置等，然后将它们应用到HTML元素内联，这可以通过良好的CSS布局工作来完成，并且可以解决代理问题你有问题。 “了解更多CSS”，我想这就是我想说的。 – mystrdat