0
J'essaie de créer des popups qui ont un en-tête, un corps et un pied de page, qui redimensionne en fonction du contenu et au maximum en fonction du contenu visible du navigateur (si vous développez le navigateur, fait ainsi le popup et ajuste), et active les parchemins quand a atteint le débordement du max-height: 80% déclaré.Popups redimensionnables automatiquement avec barres de défilement
Le problème est que, si j'utilise max-height, le div qui devrait être scrollable, ne s'applique pas et se développe (voir l'exemple). Si je le change en height, alors le code fonctionne, mais tous les popups ont la même hauteur, ce qui est quelque chose que je ne veux pas.
Voir le code ci-dessous (ou au jsfiddle).
La deuxième fenêtre qui ouvre de l'image, a le grand texte qui a besoin des barres de défilement active et je ne sais pas comment le faire fonctionner:
$(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>
Quel est le but de régler le popup à la taille du contenu? Ne serait-il pas préférable de le mettre à la hauteur de la page Web? – Jack
Salut, eh bien je l'ai mal expliqué. J'ai modifié le texte. L'idée est de faire redimensionner les popups en fonction de leur contenu à un maximum que j'indique qui soit régulé par la taille de la page. La largeur fonctionne; c'est la hauteur avec laquelle j'ai un problème. – DanCoder
Oh mon dieu, cette question est devenue un vrai cornichon! Veuillez noter que Stack Overflow n'est pas un site web d'édition de code en direct - nous ne voulons pas que les questions restent dans un état où la première déclaration est qu'elles ont été éditées, puisque les nouveaux lecteurs n'auront pas vu la version précédente . Il semble que vos modifications successives aient été des tentatives incrémentielles vers une réponse, veuillez les assembler et les mettre * ci-dessous *, afin que la paire question-réponse soit conservée. J'ai renvoyé la question à un état antérieur. – halfer