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

我已经尝试了各种解决方案，例如在对话框中设置最大高度并设置溢出-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>

来源

2015-09-14 Dan382

你是什么意思的“切断”？小提琴看起来不错。 – Ionut

在此示例中：http://s9.postimg.org/sy9k6un9b/Screen_Shot_2015_09_14_at_13_35_08.png当弹出容器被修复时，我无法向下滚动查看缺少的内容。 – Dan382

从.dialog css中删除宽度，使其宽度：80％，您还可以删除.large-content中存在的高度。 – razorranjan

试试这个，在#dialog-bg中添加溢出-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; 
    }

来源

2015-09-14 13:02:50 Malika

这允许我滚动到底部以便部分修复事物，但它始终使弹出窗口成为高度在屏幕上看起来很奇怪：http://jsfiddle.net/L77v4caL/12/ – Dan382

尝试添加最大高度：90％;在.dialog {} – Malika

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

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

来源

2015-09-14 13:17:36 nitesh

已经完成：'overflow-y：scroll;'in ＃dialog-bg – Dan382

看看这个帮助：http://jsfiddle.net/L77v4caL/12/ – nitesh

感谢所有，用的各种评论的帮助下，我已经有了一个有效的解决方案一起：http://jsfiddle.net/L77v4caL/14/

这意味着我必须手动设置一个MAX-高度到每个弹出窗口，但除此之外似乎很好。

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

来源

2015-09-14 13:35:15 Dan382

Popup溢出容器

回答

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

相关问题