我正在尝试创建具有页眉、正文和页脚的弹出窗口，这些弹出窗口根据内容调整大小，并根据浏览器的可视内容调整到最大值(如果您展开浏览器，弹出窗口也会调整), 并在达到声明的 max-height: 80% 溢出时激活卷轴。
问题是，如果我使用 max-height，应该可滚动的 div 不会应用和扩展(参见示例)。
如果我将其更改为 height，则代码可以正常工作，但所有弹出窗口的高度都相同，这是我不想要的。
请参阅下面的代码(或在 jsfiddle 中)。
从图像打开的第二个弹出窗口有需要滚动条激活的大文本，我不知道如何让它工作:
$(function() {
//Variable used by ESC function
var current_class = ""
//----- OPEN on Click
$('[dataPopup_open]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('dataPopup_open');
$('[dataPopup="' + targeted_popup_class + '"]').fadeIn(350);
current_open_class = targeted_popup_class
e.preventDefault();
//Fix for selection issue. When text is selected and
//popup is shown, scroll bars will not work.
//This cancels any selection on current page.
if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
});
//----- CLOSE Buttons in POPUP
$('[dataPopup_close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('dataPopup_close');
if (e.target !== this) return;
$('[dataPopup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
current_open_class = ""
});
//----- CLOSE with ESC
//By pressing ESC and using declared active popup in "current_open_class", this will close active popup. This will not close all popups.
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('[dataPopup="' + current_open_class + '"]').fadeOut(350);
}
});
});/* Outer */
.popup {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.75);
box-sizing: border-box;
}
/* Inner */
.popup-inner {
/*max-width:700px;*/
padding: 34px 0;
/*padding-left: 20px;
padding-right: 20px;*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
border-radius: 3px;
background: #fff;
/*
transition: top .25s ease;
right: 0;
bottom: 0;
margin: auto;
*/
max-width: 80%;
max-height: 80%;
}
.popup_padding {
padding: 20px;
max-height: 100%;
max-width: 100%;
overflow: auto;
}
.popup_content {
background: #cedde5;
height: 100%;
}
.popup_content h2 {
margin-top: 0;
}
.pop_header_closeX {
top: 0px;
height: 34px;
width: 100%;
background: #acd0e2;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: absolute;
}
.pop_footer_close {
bottom: 0px;
height: 34px;
width: 100%;
background: #acd0e2;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
}
/* Close Button */
.popup-close {
width: 30px;
height: 30px;
padding-top: 6px;
display: inline-block;
position: absolute;
top: 15px;
right: 15px;
transition: ease 0.25s all;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
border-radius: 1000px;
/*
background:rgba(0,0,0,0.8);
*/
background: none;
font-family: Arial, Sans-Serif;
font-size: 20px;
text-align: center;
line-height: 100%;
/*
color:#fff;
*/
color: #000000;
text-decoration: none;
}
.popup-close:hover {
-webkit-transform: translate(50%, -50%) rotate(180deg);
transform: translate(50%, -50%) rotate(180deg);
/*
background:rgba(0,0,0,1);
*/
background: none;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST POPUP</title>
<link rel="stylesheet" type="text/css" href="popupCCS.css">
<script src="..\js\jQueryV3.js"></script>
<script src="popupJS.js"></script>
</head>
<body>
<div class="main">
<div class="content">
<h2>Bla Bla Title</h2>
<p>
<a class="btn" dataPopup_open="popup-1" href="#">Test POPUP 1</a>
</p>
<p>
Test 1
<ul>
<li>
Test pointer 1
</li>
</ul>
</p>
<p>
<a class="btn" dataPopup_open="popup-2" href="#">Test POPUP 2</a>
</p>
<p>
Test 2
<ul>
<li>
Test pointer 1
</li>
</ul>
</p>
<img src="https://s24.postimg.org/3unhjb09x/Test_Image_Popup.jpg" usemap="#ImgPopupCoord">
<map name="ImgPopupCoord">
<area shape="rect" coords="12,1,83,59" dataPopup_open="popup-3" href="#">
<area shape="rect" coords="39,109,67,123" dataPopup_open="popup-4" href="#">
</map>
</div>
<div dataPopup_close="popup-1" class="popup" dataPopup="popup-1">
<div class="popup-inner">
<div class="pop_header_closeX">
<a class="popup-close" dataPopup_close="popup-1" href="#">x</a>
</div>
<div class="popup_content">
<h2>Popup 1 OK</h2>
<p>
Test 1
<ul>
<li>
Test pointer 1
</li>
</ul>
</p>
</div>
<div class="pop_footer_close">
<p>
<a dataPopup_close="popup-1" href="#">Close</a>
</p>
</div>
</div>
</div>
<div dataPopup_close="popup-2" class="popup" dataPopup="popup-2">
<div class="popup-inner">
<h2>Popup 2 OK</h2>
<p>
Test 2
<ul>
<li>
Test pointer 2
</li>
<li>
Test pointer 2
</li>
<li>
Test pointer 2
</li>
<li>
Test pointer 2
</li>
</ul>
</p>
<p>
<a dataPopup_close="popup-2" href="#">Close</a>
</p>
<a class="popup-close" dataPopup_close="popup-2" href="#">x</a>
</div>
</div>
<div dataPopup_close="popup-3" class="popup" dataPopup="popup-3">
<div class="popup-inner">
<h2>Popup 3 Image OK</h2>
<p>
Test 3
<ul>
<li>
TEST POPUP for GAOP's
</li>
</ul>
</p>
<p>
<a dataPopup_close="popup-3" href="#">Close</a>
</p>
<a class="popup-close" dataPopup_close="popup-3" href="#">x</a>
</div>
</div>
<div dataPopup_close="popup-4" class="popup" dataPopup="popup-4">
<div class="popup-inner">
<div class="pop_header_closeX">
<a class="popup-close" dataPopup_close="popup-4" href="#">x</a>
</div>
<div class="popup_padding">
<div class="popup_content">
<h2>Popup 4 Image with SCROLL OK</h2>
<p>
Test 4
<ul>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3
</li>
<li>
Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3Test pointer 3
</li>
</ul>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</p>
</div>
</div>
<div class="pop_footer_close">
<p>
<a dataPopup_close="popup-4" href="#">Close</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
您可以使用 css 类“vh”来处理屏幕尺寸。不需要javascript。这fiddle是从您的最新链接中 fork 出来的。进行了一些更改，例如:
jQuery(已删除)
CSS
.popup-inner {
max-height: 70vh;
}
.popup_padding {
padding-left: 20px;
padding-right: 20px;
width: auto;
height: auto;
max-height: 65vh;
overflow: auto;
}
.pop_header_closeX {
top: -34px;
}
.pop_footer_close {
bottom: -34px;
}
您可能想稍微调整一下定位和大小，尤其是通过媒体查询来显示较小的显示器，但这种更改绝对可以实现您的期望。
关于javascript - 带有滚动条的自动调整大小的弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41265330/