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