Sortir une div du flux

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

je ne sais pas si j'utilise le bon terme, mais j'essaie d'afficher une fenêtre modale en full CSS sur toute la largeur d'une page, mais là elle ne prend que la largeur de la colonne depuis laquelle elle est appelée :

Pièce jointe 623051

le

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="#modalContent">Voir la fenêtre modale</a>
<div>    
        <div class="modalLayer" id="modalContent">
            <div class="popup_block">
                <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="close_pop.png"></a>
                <img style="float: right;margin: 0 0 0 20px" alt="Lil bomb dude" src="150.png">
                <h2>titre</h2>
 
                <p>texte</p>
 
            </div>
        </div>
    </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#modalCheck{
            display: none;
        }
.modalLayer{
            display: none;
            position: fixed;
            z-index: 9999999999999;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
#modalCheck:checked + .modalLayer, #modalContent:target{
            display: block;
        }
.popup_block{
            background: #fff;
            padding: 5px;
            border: 5px solid #ddd;
            position: relative;
            margin: 10% auto;
            width: 60%;
            box-shadow: 0px 0px 10px #000;
            border-radius: 10px;
        }
img.btn_close {
            float: right;
            margin: -55px -55px 0 0;
            cursor: pointer;
        }
.button{
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }

Merci à vous pour vos pistes

29/07/2022, 10h18
NoSmoking
Bonjour,
il nous manque la définition, CSS de l'élément contenant, pour vérifier que celui-ci n'est pas un « bloc contenant à positionnement fixe », comme par exemple si celui-ci possède une propriété CSS transform.

Ressources :
- Positionnement fixe
- Containing Blocks of Positioned Boxes

Bonjour,

je pense que l'élément principal sur lequel se base la fenêtre est un UL (et le LI qui va avec), qui a effectivement une propriété transform. Je remets tout le code ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<section class="choices">
<ul class="layer_choices simple active">
	<li class="layer-choices-title">
		<span>Cadre <a href="#" class="close"><span>Fermer</span></a></span>
 
	</li>
	<li class="choices-list"><ul data-layer-id="1">
 
	<li class="choice"> 
	<button type="button" class="choice-item">
 
			<i class="mkl-pc-thumbnail"><span><img src="150.png" alt=""></span></i>
 
			<span class="text choice-name">Choix 1</span>
			<span class="description">description du choix 1</span>
		</button>
	</li><li class="choice active"> 
	<button type="button" class="choice-item">
 
			<i class="mkl-pc-thumbnail"><span><img src="150.png" alt=""></span></i>
 
			<span class="text choice-name">Choix 2</span>
			<span class="description"><div>
<a href="#modalContent">Voir la fenêtre modale</a>
<div>		
		<div class="modalLayer" id="modalContent">
			<div class="popup_block">
				<a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="close_pop.png"></a>
				<img style="float: right;margin: 0 0 0 20px" alt="" src="150.png">
				<h2>Popup #1</h2>
 
				<p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
				<p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
 
			</div>
		</div>
	</div>
</div></span>
		</button>
	</li></ul></li>
</ul>
</section>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices.active {
transform: translateX(0);
visibility: visible;
box-shadow: -12px 0 40px -10px rgba(0, 0, 0, 0.15);
}
 
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices {
position: absolute;
top: 0;
bottom: 0;
left: 60px;
right: 0;
transition: all 0.3s cubic-bezier(0.02, 0.5, 0.14, 1.01);
background: var(--mkl_pc_color-dark);
}
 
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li {
display: block;
margin: 0;
padding: 0;
line-height: 2;
position: relative;
}
 
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices {
position: relative;
height: 100%;
overflow: hidden;
overflow-y: auto;
}

29/07/2022, 17h51
NoSmoking

Citation:

je pense que l'élément principal sur lequel se base la fenêtre est un UL (et le LI qui va avec), qui a effectivement une propriété transform.

la voilà la source de ton problème.

Pour palier à cela, et considérant que le transform est utile, il te suffit de placer ton élément <div class="modalLayer" id="modalContent"> comme enfant direct du <body> ce qui ne changera pas le résultat au click sur ton lien.
29/07/2022, 19h23
badseyar

hmmm, ça ne m'arrange pas cette affaire :-)
En fait tout le code générant la fenêtre est inclus dans un champ d'un plugin wordpress, donc je ne peux pas la bouger... Je suis donc dans une impasse ? Car le contenu de cette fenêtre sera à chaque fois chargé dans le champ du plugin (pour un catalogue de plusieurs dizaines de références). A la base ce n'était qu'un petit champ texte brut, mais mon ami pour qui je regarde cela voudrait afficher plus de détails dans une fenêtre modale...
29/07/2022, 21h19
mathieu

il y a certaines extensions wordpress qui ont été bien réfléchies dés le début pour pouvoir être personnalisées.
de quelle extension s'agit il ?
29/07/2022, 21h38
badseyar

C'est Product Configurator for Wordpress : https://fr.wordpress.org/plugins/pro...r-woocommerce/
29/07/2022, 22h45
mathieu

et où mettez-vous le code de l'élément modal ?
si je mets le code html dans "contenu" -> "choix" -> "html personnalisé", il apparait sur toute la largeur du navigateur dans l'espace à droite et pas dans la colonne à gauche.
29/07/2022, 22h55
badseyar

Je le mets dans description
le problème du champ Html personnalisé, c'est que ce qui a été saisi reste affiché à l'écran si la personne choisit cette option. Donc, les liens vont se superposer entre les différents choix de matériel

essayez ce code dans votre thème. il va déplacer les éléments ".modalLayer" à la fin de "body"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 add_action("wp_footer", function () { ?> <script> "use strict"; ($ => { $(() => { wp.hooks.addAction("PC.fe.init", "PC", () => { $("body").append($(".modalLayer")); }); }); })(jQuery); </script> <?php });
si ça fonctionne pour vous, n'hésitez pas à demander sur le forum javascript si ce code peut être améliorer. par exemple je pense qu'il vaut mieux mettre ce code dans un fichier javascript au lieu du corps de la page.

30/07/2022, 12h11
badseyar
ça fonctionne merci beaucoup !!!
C'est un peu lié au CSS donc je me permets une dernière question sur le sujet : je vais créer X fenêtres avec la classe .modalLayer, donc avec l'id modalContent qui sera par exemple modalContent-X.
Il existe une bidouille qui permet de ne pas créer la ligne CSS pour chaque modalContent-X ?

C'est-à-dire remplacer :
Code:

1 2 3 4 5 6 #modalContent-1:target{ display: block; } #modalContent-2:target{ display: block; }
par une ligne permettant de multiplier à l'infini cette propriété ?
31/07/2022, 10h27
badseyar
Bonjour,

à priori (faut que je pousse un peu plus) je m'en suis sorti avec
Code:

1 2 3 div[id^='modalContent']:target { display: block; }
merci à vous
31/07/2022, 10h44
mathieu
si vous avez mis la classe "modalLayer" à tous ces éléments, vous avez juste besoin de mettre ça :
Code:

1 2 3 4 .modalLayer:target { display : block; }
31/07/2022, 12h24
badseyar

je vais regarder ça merci ;-)