Question

我正在构建的网站上有模式弹出对话框的问题。这是网站：www.notforsale.magalidb.com

这些链接背后都有一个模式弹出窗口：

“Lisez la version en ligne”
“阅读在线版”
“条件”
“Contactez la redaction”
“Contacteer de redactie”
“联系新版本”

问题：

当我通过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;
}

我知道这可能是一个问题的大量文本，但我真的想尽可能多地提供详细信息，以便让您更容易看到整个包。如前所述，您可以看到该网站并测试弹出窗口问题。我使用Google Chrome进行测试，如果一切正常，我会在其他浏览器中查看该网站以使其兼容。

另外，我认为跳跃弹出问题是可以解决的。我看到了其他用于制作模态弹出窗口的教程，这些教程在我的移动浏览器中工作得很好，但我不能重新编码所有这些弹出窗口。除非我可以编辑现有代码并缩短它，同时保留功能而不必编辑index.php中的任何内容。无论如何......请看看它。在浏览器中插入它，检查元素等可能更容易......这是很多代码。

非常感谢任何帮助！

Answer 1

将你的模态弹出窗口设置为position：fixed和height / width 100％，这应该覆盖整个屏幕，你不必担心窗口大小调整。

对于您的各个弹出框，将它们设置为位置：固定，并使用顶部/左侧来定位而不是边距。至于缩放，我必须看到这一点，以便更好地掌握你想要的效果。

在移动浏览器中显示模式弹出窗口以及调整浏览器窗口大小的问题

1 个答案: