構築しているサイトのモーダルポップアップダイアログに問題があります。これはサイトです：www.notforsale.magalidb.com
これらのリンクはすべて、背後にモーダルポップアップがあります。
- 「Lisezlaversionenligne」
- 「オンライン版を読む」
- "条件"
- 「Contactezlaredaction」
- 「Contacteerderedactie」
- 「編集に連絡する」
問題点：
- Safariモバイル（iPhoneまたはiPad）を介してWebサイトを閲覧し、上記のリンクのいずれかをクリックすると、ポップアップが表示されます。しかし、ズームインすると、ポップアップがジャンプして離れます（ほとんどの場合、画面の右下にあります）。そのため、そのポップアップに書かれているものを拡大することはできません。
- Safari、Opera、Firefox、Chrome、Internet Explorerなどの通常のブラウザ（IEではテストしていません）でWebサイトを閲覧し、[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;
}
これは質問のテキストが多いかもしれませんが、バンドル全体が見やすくなるように、できるだけ詳細に説明したいと思います。前述のように、Webサイトを表示して、ポップアップの問題をテストできます。私はそれをテストするためにグーグルクロームを使用します、そしてすべてがそこでうまくいくならば、私はそれを互換性があるようにするために他のブラウザでサイトをチェックします。
また、ジャンプポップアップの問題は解決できると思います。モーダルポップアップを作成するための他のチュートリアルを見ましたが、それらはモバイルブラウザーで問題なく機能しますが、これらすべてのポップアップを再コーディングする必要はありません。既存のコードを編集して短縮できる場合を除いて、機能を維持し、index.phpで何も編集する必要はありません。とにかく…見てください。ブラウザー内でそれをいじって、要素などを検査する方が簡単かもしれません...それはかなり多くのコードです。
どんな助けでも大歓迎です！