Javascript 在移动浏览器中显示模式弹出窗口和调整浏览器窗口大小时出现的问题_Javascript_Modal Dialog_Modal Popup

Javascript 在移动浏览器中显示模式弹出窗口和调整浏览器窗口大小时出现的问题

javascript

Javascript 在移动浏览器中显示模式弹出窗口和调整浏览器窗口大小时出现的问题,javascript,modal-dialog,modal-popup,Javascript,Modal Dialog,Modal Popup,在我正在构建的站点上，我对模式弹出对话框有一些问题。这是网站：www.notforsale.magalidb.com 这些链接后面都有一个模式弹出窗口： <!DOCTYPE html> <html> <head> <title>NOTFORSALE, the most exclusive car magazine</title> <link href="stylesheets/default.css" rel="styleshe

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

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

<!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>

“Lisez la版本对齐”
“阅读在线版本”
“条件”
“联系编辑部”
“重新激活联系人”
“联系编辑部”

问题：

<!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>

当我通过Safari mobile（iPhone或iPad）浏览网站并单击上述任何链接时，会出现一个弹出窗口。但当我放大时，弹出窗口会跳开（大部分在屏幕的右下角）。所以我不能放大那个弹出窗口中写的内容

当我通过Safari、Opera、Firefox、Chrome或Internet Explorer等常规浏览器浏览网站时（虽然没有在IE上测试），我点击“Bekijk de online Versione”，然后我会看到一个更大的弹出窗口，里面有一本杂志，可以像书一样翻动。如果我调整浏览器窗口的大小，这个弹出窗口会跳到屏幕的右下角。然后我必须关闭弹出窗口并重新打开它，以便再次看到它居中

我想要什么：

我需要在现有代码中编辑什么才能使弹出窗口保持居中？甚至在移动浏览器中

如何防止此特定弹出窗口跳到浏览器的角落？我没有写它与其他弹出窗口不同，唯一的区别是宽度和高度。但我不明白为什么它总是跳开，不像其他弹出窗口

如果有人有可能的解决方案，请分享。这是非常紧迫的，因为我发现我的客户应该有一个功能正常的网站

代码：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);
});
    });

/* 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

<!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>

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

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

非常感谢您的帮助

将您的模式弹出窗口设置为位置：固定和高度/宽度100%，这将覆盖整个屏幕，您不必担心窗口大小的问题

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

将模式弹出窗口设置为位置：固定和高度/宽度100%，这将覆盖整个屏幕，并且您不必担心窗口大小的问题

对于您的单个弹出框，将其设置为“位置：固定”，并使用“上/左”来定位，而不是使用边距。至于缩放，我必须在实际操作中看到这一点，以便更好地掌握您想要的效果。

您需要停止使用JavaScript进行可视化布局，这是这里的主要问题。你的问题是这样做的直接结果。我真的不明白你想说什么。为什么我应该停止使用JavaScript来实现这一点？那么你有更好的主意吗？这是一个糟糕的做法-在这种情况下，你不需要从JavaScript获取宽度、高度、位置等，然后将它们应用到HTML元素的内联，这一切都可以通过精细的CSS布局工作来完成，并将解决你遇到的代理问题。“了解更多CSS”，我想这就是我想说的。你需要停止使用JavaScript来进行可视化布局，这是这里的主要问题。你的问题是这样做的直接结果。我真的不明白你想说什么。为什么我应该停止使用JavaScript来实现这一点？那么你有更好的主意吗？这是一个糟糕的做法-在这种情况下，你不需要从JavaScript获取宽度、高度、位置等，然后将它们应用到HTML元素的内联，这一切都可以通过精细的CSS布局工作来完成，并将解决你遇到的代理问题。“了解更多CSS”，我想这就是我想说的。