Jquery 溢出容器的弹出窗口
我有一个弹出窗口，动态创建一个固定的背景，其中包含一个中心对话框。它可以按预期工作，但在小型显示器（小型笔记本电脑和平板电脑/手机）上，内容可以在可视区域之外运行，并且由于其固定容器而无法访问。这个问题在较小的android设备上最为严重，因为它会触发弹出窗口中的表单输入，这会导致android键盘将屏幕上的不动产一分为二 我尝试过各种解决方案，例如在对话框上设置最大高度，将overflow-y设置为滚动，但在可以容纳完整弹出窗口的显示器上，这会切断它，破坏化妆品 我在这里错过了什么轻松的胜利吗？我很乐意部署CSS或jQuery解决方案 JSfiddle： 问题视频：（无法滚动到弹出窗口的底部，它只是被切断。） 完整HTML：Jquery 溢出容器的弹出窗口,jquery,css,Jquery,Css,我有一个弹出窗口，动态创建一个固定的背景，其中包含一个中心对话框。它可以按预期工作，但在小型显示器（小型笔记本电脑和平板电脑/手机）上，内容可以在可视区域之外运行，并且由于其固定容器而无法访问。这个问题在较小的android设备上最为严重，因为它会触发弹出窗口中的表单输入，这会导致android键盘将屏幕上的不动产一分为二 我尝试过各种解决方案，例如在对话框上设置最大高度，将overflow-y设置为滚动，但在可以容纳完整弹出窗口的显示器上，这会切断它，破坏化妆品 我在这里错过了什么轻松的胜利吗
<!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>
测试
$（文档）.ready（函数（）{
/*如果单击按钮，则创建对话框*/
$（'.button'）。单击（函数（）{
/*创建背景*/
$（'body'）。前缀（“”）；
/*创建弹出窗口和表单*/
$（'dialog bg'）.append（'Popup banner这可能是youtube视频的大型形式或iFrame'）.hide（）.fadeIn（500）；
/*创建关闭按钮*/
$（'.dialog'）。前置（''）；
/*从“关闭”按钮中删除默认链接行为*/
$（'a.close'）。单击（函数（）{
返回false；
});
/*单击“关闭全部”*/
$（'.close，.close dialog'）。单击（函数（）{
$（'#dialog bg、.dialog、.close dialog.close'）.remove（）；
});
});
});
#对话背景{
排名：0；
z指数：1；
宽度：100%；
身高：100%；
位置：固定；
背景：url(https://dl.dropboxusercontent.com/u/12645552/overlay.png)重复0次；
}
.对话{
宽度：350px；
填充：20px；
位置：相对位置；
保证金：50px自动0；
背景色：#fff；
}
.大量内容{
颜色：#fff；
高度：300px；
填充：20px；
背景色：#000；
}
.关闭对话框{
z指数：1；
宽度：28px；
高度：28px；
右：15px；
顶部：15px；
光标：指针；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
背景色：#fff；
-webkit盒阴影：0px 0px 0px 2px rgba（0,0,0,0.6）；
-moz盒阴影：0px 0px 0px 2px rgba（0,0,0,0.6）；
盒影：0px 0px 0px 2px rgba（0,0,0,0.6）；
}
a、 接近{
颜色：#000；
字体大小：1.3em；
线高：1.2；
字体系列：arial；
文字装饰：无；
}
.按钮{
颜色：#fff；
填充：10px；
光标：指针；
文本对齐：居中；
背景色：#2599ca；
}
.按钮：悬停{
文字装饰：下划线；
}
乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎特·朗卡斯的猫咪万岁。augue et rhoncus的Nunc孕妇。纳姆·利奥·埃克斯（Nam leo ex）、普雷蒂姆·阿内克·欧盟（pretium a neque eu）、阿库姆·阿库姆（accumsan Efficitiur ligula）。奥奇法雷特拉河上的莫里斯·索达拉斯水道。维尼那提斯瓦里乌斯的奥迪奥万岁。这是我最喜欢的。请记住我的话。前庭直径，无蜗壳门。Fusce mattis enim eget pulvinar congue。努克·尤伊斯莫德·萨皮恩·布朗迪特·埃格斯塔斯。时间上的整数。在奎斯埃尼姆的奥纳雷广场，马克西姆·埃吉特·莫里斯
梅塞纳斯·奎斯·莫利斯·努拉。这是暂时的精英。莫比·多洛·安特，欧奥奇家族的显贵，马萨的前矢状体。这是一种不公平的行为。这是一个无忧无虑的帝国。羊奶粥，孕妇食用，马蒂斯埃拉。潜力悬钩子。埃尼安·乌兰·科珀·尼索·欧内斯塔。不要开捷径。非奥迪奥迪亚库利斯莫利斯湖。整数a大游标。前庭是一个独立的前庭，它是一个不可替代的前庭，是一个不可替代的前庭。埃尼安·菲尼布斯（Aenean finibus）、维尼那提斯家族（nisi vel feugiat Venetatis）、马萨家族（magna nisl lobortis massa）和前中央前庭。面神经前束，前束，同侧前束。Suspendisse eget sapien nisi。这是一个很好的例子
这是一个巨大的挑战。Nam ullamcorper坐在amet massa nec finibus。我是内克，这是我的座右铭。南和康塞奎特。在nibh lectus，malesuada congue tortor sed，aliquam fringilla enim。这是一个很好的例子。乌拉姆科珀河沿岸地区
莫里斯·维尼纳蒂斯·塞姆·尼布，在弗林尼利亚·埃尼姆·坦普斯·奎斯。未经书面同意，未经书面同意，未经书面同意，未经书面同意。佩伦茨克自由康格大龙虾。南廷西德设施有限公司（Nam tincidunt euismod facilisis）。从现在开始，自由主义者就可以获得自由，欧盟也可以获得自由。佩伦特斯风格的nisl nisi，tempus ac权杖，自由女神的前庭。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名
不，这是一个元素，这是一个暂时性的元素，这是一个暂时性的元素。中止妊娠purus。在tincidunt urna Elite。Maesenas在malesuada nisl。油炸圈饼。设备的有效性。别告诉我，孕妇的苏打水，乌兰姆·科佩尔·奎斯·萨皮恩。阿利奎姆·埃拉特·帕特。在pulvinar tempus的Donec ultrices mauris。多涅克·普雷蒂姆、劳里特·费吉亚、奥古斯·奥古斯·费利斯·萨皮恩·达皮布斯·奥古斯（felis sapien dapibus augue）在佩伦茨克钻石城（Pellentsque diam lorem dapibus ipsum）。不能坐在前面，坐在前面
点击我
#dialog bg中更改以下内容
#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;
}
添加这个，这应该能够在弹出窗口上滚动您。您可以根据内容进行外观更改，并尝试在内容中使用高度
dialog bg{overflow:scroll；}谢谢大家，在各种评论的帮助下，我找到了一个可行的解决方案：
意思是
<!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>