对话框-BG {溢出：滚动;}

Question

我有一个动态创建固定背景的弹出窗口，其中包含一个居中的对话框。它按预期工作，但在小型显示器（小型笔记本电脑和平板电脑/手机）上，内容可以在可视区域外运行，并且由于其固定容器变得无法访问。这个问题在较小的Android设备上最为严重，因为它会弹出弹出窗口中的表单输入，因为这会创建Android键盘，将屏幕空间减少一半。

我尝试了各种解决方案，例如在对话框上设置最大高度并设置overflow-y滚动，但在适合完整弹出窗口的显示器上，这会削减它并破坏化妆品。

我在这里缺少任何轻松的胜利吗？很高兴部署CSS或jQuery解决方案。

的jsfiddle：http://jsfiddle.net/L77v4caL/9/

问题视频：https://youtu.be/LW9EeMVarcM（无法滚动到弹出窗口的底部，它只会被切断。）

完整HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    /* If button is clicked create dialog */
    $('.button').click(function () {
        /* Create background */
        $('body').prepend('<div id="dialog-bg"></div>');
        /* Create popup & form */
        $('#dialog-bg').append('<div class="dialog"><h2>Popup banner</h2><div class="large-content">This could be a large form or an iFrame to a youtube video<form><input name="email" placeholder="Form example" required=""></form></div></div>').hide().fadeIn(500);
        /* Create close button */
        $('.dialog').prepend('<div class="close-dialog"><a class="close" href="/">x</a></div>');
        /* Remove default link behaviour from close button */
        $('a.close').click(function () {
            return false;
        });
        /* Close all on click */
        $('.close, .close-dialog').click(function () {
            $('#dialog-bg, .dialog, .close-dialog .close').remove();
        });
    });
});
</script>
<style>
#dialog-bg {
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(https://dl.dropboxusercontent.com/u/12645552/overlay.png) 0 0 repeat;
}

.dialog {
    width: 350px;
    padding: 20px;
    position: relative;
    margin: 50px auto 0;
    background-color: #fff;
}

.large-content {
    color: #fff;
    height: 300px;
    padding: 20px;
    background-color: #000;
}

.close-dialog {
    z-index: 1;
    width: 28px;
    height: 28px;
    right: 15px;
    top: 15px;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
}

a.close {
    color: #000;
    font-size: 1.3em;
    line-height: 1.2;
    font-family: arial;
    text-decoration: none;
}

.button {
    color: #fff;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background-color: #2599ca;
}

.button:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend felis at aliquet rhoncus. Nunc gravida in augue et rhoncus. Nam leo ex, pretium a neque eu, accumsan efficitur ligula. Mauris sodales nulla at orci pharetra vehicula. Vivamus quis odio at mi venenatis varius. Proin nec tristique odio. Donec dictum suscipit odio et rutrum. Quisque rutrum vestibulum diam, sit amet porttitor nulla volutpat ut. Fusce mattis enim eget pulvinar congue. Nunc euismod sapien ut blandit egestas. Integer in tempor est. In quis enim at quam ornare maximus ac eget mauris.</p>
<p>Maecenas quis mollis nulla. Suspendisse quis bibendum dolor, quis tempor elit. Morbi dolor ante, dignissim eu orci in, pretium sagittis massa. Nullam tincidunt tortor vel bibendum feugiat. Quisque a dolor nec ante imperdiet ullamcorper. Fusce ac risus congue, gravida ex sed, mattis erat. Suspendisse potenti. Aenean ullamcorper nisl eu interdum egestas. Donec a porta justo. Maecenas dapibus lacus non odio iaculis mollis. Integer a cursus magna. Vestibulum sollicitudin, urna nec consequat convallis, dui dolor lacinia enim, sit amet mattis diam nunc non justo. Aenean finibus, nisi vel feugiat venenatis, magna nisl lobortis massa, sed vestibulum tellus ex ac tellus. Etiam a risus facilisis, congue ex vel, pretium ipsum. Suspendisse eget sapien nisi. Sed rhoncus tortor ut velit volutpat feugiat.</p>
<p>Praesent consequat justo quis magna ultrices fringilla. Nam ullamcorper sit amet massa nec finibus. Sed enim neque, dictum ullamcorper accumsan a, fringilla quis turpis. Nam et consequat tellus. In nibh lectus, malesuada congue tortor sed, aliquam fringilla enim. Sed euismod nisi et lectus rhoncus, nec pharetra tortor pulvinar. Cras pretium ullamcorper lorem nec fringilla.</p>
<p>Mauris venenatis sem nibh, in fringilla enim tempus quis. Nullam et tellus pretium, dictum nunc vel, venenatis ipsum. Pellentesque congue libero ac lobortis maximus. Nam tincidunt euismod facilisis. Cras volutpat, augue vitae consectetur tempor, libero augue placerat nunc, eu placerat ex lacus nec nulla. Pellentesque nisl nisi, tempus ac scelerisque in, vestibulum in libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nam elementum lectus est, id porttitor magna tempor id. Ut metus orci, sagittis sagittis venenatis sit amet, pulvinar eu eros. Suspendisse sed gravida purus. In tincidunt urna elit. Maecenas at malesuada nisl. Donec ut congue risus. Etiam volutpat efficitur facilisis. Donec tellus nibh, sodales vel gravida ut, ullamcorper quis sapien. Aliquam erat volutpat. Donec ultrices mauris at pulvinar tempus. Donec pretium, lectus vel laoreet feugiat, felis sapien dapibus augue, at pellentesque diam lorem dapibus ipsum. Nulla sit amet mattis ante, sit amet vestibulum nisi.</p>
<div class="button">Click me</div>
</body>
</html>

Answer 1

试试这个，在#dialog-bg中添加overflow-y并在.dialog

中更改以下内容

#dialog-bg{
    overflow-y:scroll;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(https://dl.dropboxusercontent.com/u/12645552/overlay.png) 0 0 repeat;
}

    .dialog {
        width: 350px;
        padding: 20px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }

Answer 2

添加此项，这应该能够在弹出窗口中滚动你。您可以根据内容进行外观修改，并尝试在内容中播放高度。

对话框-BG {溢出：滚动;}

Answer 3

谢谢大家，在各种评论的帮助下，我一起得到了一个有效的解决方案：http://jsfiddle.net/L77v4caL/14/

这意味着我必须手动为每个弹出窗口设置最大高度，但除此之外似乎没问题。

 <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        /* If button is clicked create dialog */
        $('.button').click(function () {
            /* Create background */
            $('body').prepend('<div id="dialog-bg"></div>');
            /* Create popup & form */
            $('#dialog-bg').append('<div class="dialog"><h2>Popup banner</h2><div class="large-content">This could be a large form or an iFrame to a youtube video<form><input name="email" placeholder="Form example" required=""></form></div></div>').hide().fadeIn(500);
            /* Create close button */
            $('.dialog').prepend('<div class="close-dialog"><a class="close" href="/">x</a></div>');
            /* Remove default link behaviour from close button */
            $('a.close').click(function () {
                return false;
            });
            /* Close all on click */
            $('.close, .close-dialog').click(function () {
                $('#dialog-bg, .dialog, .close-dialog .close').remove();
            });
        });
    });
    </script>
    <style>
    #dialog-bg {
    overflow-y:scroll;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(https://dl.dropboxusercontent.com/u/12645552/overlay.png) 0 0 repeat;
}

.dialog {
    background-color: #fff;
    bottom: 0;
    height: 80%;
    max-height: 450px;
    left: 0;
    margin: auto;
    overflow: auto;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
}

.large-content {
    color: #fff;
    height: 300px;
    padding: 20px;
    background-color: #000;
}

.close-dialog {
    z-index: 1;
    width: 28px;
    height: 28px;
    right: 15px;
    top: 15px;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
}

a.close {
    color: #000;
    font-size: 1.3em;
    line-height: 1.2;
    font-family: arial;
    text-decoration: none;
}

.button {
    color: #fff;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background-color: #2599ca;
}

.button:hover {
    text-decoration: underline;
}
    </style>
    </head>
    <body>
    <h1>Lorem ipsum</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend felis at aliquet rhoncus. Nunc gravida in augue et rhoncus. Nam leo ex, pretium a neque eu, accumsan efficitur ligula. Mauris sodales nulla at orci pharetra vehicula. Vivamus quis odio at mi venenatis varius. Proin nec tristique odio. Donec dictum suscipit odio et rutrum. Quisque rutrum vestibulum diam, sit amet porttitor nulla volutpat ut. Fusce mattis enim eget pulvinar congue. Nunc euismod sapien ut blandit egestas. Integer in tempor est. In quis enim at quam ornare maximus ac eget mauris.</p>
    <p>Maecenas quis mollis nulla. Suspendisse quis bibendum dolor, quis tempor elit. Morbi dolor ante, dignissim eu orci in, pretium sagittis massa. Nullam tincidunt tortor vel bibendum feugiat. Quisque a dolor nec ante imperdiet ullamcorper. Fusce ac risus congue, gravida ex sed, mattis erat. Suspendisse potenti. Aenean ullamcorper nisl eu interdum egestas. Donec a porta justo. Maecenas dapibus lacus non odio iaculis mollis. Integer a cursus magna. Vestibulum sollicitudin, urna nec consequat convallis, dui dolor lacinia enim, sit amet mattis diam nunc non justo. Aenean finibus, nisi vel feugiat venenatis, magna nisl lobortis massa, sed vestibulum tellus ex ac tellus. Etiam a risus facilisis, congue ex vel, pretium ipsum. Suspendisse eget sapien nisi. Sed rhoncus tortor ut velit volutpat feugiat.</p>
    <p>Praesent consequat justo quis magna ultrices fringilla. Nam ullamcorper sit amet massa nec finibus. Sed enim neque, dictum ullamcorper accumsan a, fringilla quis turpis. Nam et consequat tellus. In nibh lectus, malesuada congue tortor sed, aliquam fringilla enim. Sed euismod nisi et lectus rhoncus, nec pharetra tortor pulvinar. Cras pretium ullamcorper lorem nec fringilla.</p>
    <p>Mauris venenatis sem nibh, in fringilla enim tempus quis. Nullam et tellus pretium, dictum nunc vel, venenatis ipsum. Pellentesque congue libero ac lobortis maximus. Nam tincidunt euismod facilisis. Cras volutpat, augue vitae consectetur tempor, libero augue placerat nunc, eu placerat ex lacus nec nulla. Pellentesque nisl nisi, tempus ac scelerisque in, vestibulum in libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Nam elementum lectus est, id porttitor magna tempor id. Ut metus orci, sagittis sagittis venenatis sit amet, pulvinar eu eros. Suspendisse sed gravida purus. In tincidunt urna elit. Maecenas at malesuada nisl. Donec ut congue risus. Etiam volutpat efficitur facilisis. Donec tellus nibh, sodales vel gravida ut, ullamcorper quis sapien. Aliquam erat volutpat. Donec ultrices mauris at pulvinar tempus. Donec pretium, lectus vel laoreet feugiat, felis sapien dapibus augue, at pellentesque diam lorem dapibus ipsum. Nulla sit amet mattis ante, sit amet vestibulum nisi.</p>
    <div class="button">Click me</div>
    </body>
    </html>

弹出溢出容器

3 个答案:

对话框-BG {溢出：滚动;}