Discussion :

[badseyar]

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 :



le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[badseyar]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[NoSmoking]

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.

[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...

[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 ?