0
ヘッダー、ボディーおよびフッターがあり、コンテンツに応じてサイズを変更するポップアップを作成しようとしています。ブラウザーから表示可能なコンテンツに応じて最大サイズに変更しますポップアップが調整されます）、宣言された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>
ポップアップをコンテンツのサイズに設定する目的は何ですか？それをウェブページの高さに設定することは好ましくないでしょうか？ – Jack
こんにちは、私は間違って説明しました。 私はテキストを編集しました。そのアイデアは、内容に応じてポップアップのサイズをページのサイズによって規定される最大値までリサイズすることです。 幅が有効です。それは私が問題を抱えている高さです。 – DanCoder
ああああ、この質問は右のピクルスに入った！ Stack Overflowはライブコード編集のウェブサイトではありません。新しい読者（つまりほとんどの読者）が以前のバージョンを見ていないため、最初のステートメントが編集された状態で質問を残すことは望ましくありません。あなたのいくつかの編集は、答えに向かって段階的な試みだったようですので、質問と回答のペアが保存されるようにそれらを照合して*以下*にしてください。私は質問を以前の状態に戻しました。 – halfer