Bonsoir,
Je travaille actuellement sur une page avec 3 "boutons" ouvrant chacun une fenêtre modale. Le problème est que les fenêtres liées aux 2 premiers "boutons" s'empilent (les deux sont visibles). Seul la troisième fenêtre s'affiche correctement. Si j'applique un fond noir à la classe des fenêtres, seul la troisième fenêtre est visible (quelque soit le bouton). J'ai tenté de rajouter des classes... rien à faire. Surement quelque chose de stupide. Voici les CSS d'origine :
.cd-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
}
.cd-modal::after {
/* gradient overlay at bottom of modal window */
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
pointer-events: none;
background: transparent;
background: -webkit-linear-gradient( bottom , #34383c, rgba(52, 56, 60, 0));
background: linear-gradient(to top, #34383c, rgba(52, 56, 60, 0));
}
.cd-modal .cd-modal-content {
height: 100%;
width: 100%;
padding: 3em 5%;
text-align: left;
overflow-y: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-modal p {
color: #ffffff;
line-height: 1.6;
margin: 2em 0;
}
.modal-is-visible .cd-modal {
z-index: 1;
visibility: visible;
opacity: 1;
pointer-events: auto;
-webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
-moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
}
.modal-is-visible .cd-modal .cd-modal-content {
-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
.cd-modal .cd-modal-content {
padding: 4em 10%;
}
}
@media only screen and (min-width: 1170px) {
.cd-modal .cd-modal-content {
padding: 6em 20%;
}
.cd-modal p {
font-size: 2rem;
line-height: 2;
}
}
.cd-modal-action {
position: relative;
}
.cd-modal-action .btn, .cd-modal-action .cd-modal-bg {
display: inline-block;
height: 4em;
background-color: #34383c;
}
.cd-modal-action .btn {
width: 12.5em;
border-radius: 0em;
color: #ffffff;
line-height: 4em;
white-space: nowrap;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 0.2s 0.3s, width 0.3s 0s;
-moz-transition: color 0.2s 0.3s, width 0.3s 0s;
transition: color 0.2s 0.3s, width 0.3s 0s;
}
.cd-modal-action .btn.to-circle {
width: 4em;
color: transparent;
-webkit-transition: color 0.2s 0s, width 0.3s 0.2s;
-moz-transition: color 0.2s 0s, width 0.3s 0.2s;
transition: color 0.2s 0s, width 0.3s 0.2s;
}
.cd-modal-action .cd-modal-bg {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
width: 4em;
border-radius: 0em;
opacity: 0;
visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateX(-2em);
-moz-transform: translateX(-2em);
-ms-transform: translateX(-2em);
-o-transform: translateX(-2em);
transform: translateX(-2em);
-webkit-transition: visibility 0s 0.15s;
-moz-transition: visibility 0s 0.15s;
transition: visibility 0s 0.15s;
}
.cd-modal-action .cd-modal-bg.is-visible {
opacity: 1;
visibility: visible;
}
.cd-modal-close {
position: fixed;
z-index: 1;
top: 20px;
right: 5%;
height: 50px;
width: 50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3) url(../img/cd-icon-close.svg) no-repeat center center;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
visibility: hidden;
opacity: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.modal-is-visible .cd-modal-close {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
@media only screen and (min-width: 768px) {
.cd-modal-close {
top: 70px;
}
}
et le html concerné :
<[/contents/242-introduction-au-dynamic-html-dhtml div] class="cd-modal">
<div class="cd-modal-content">
<p>
Test1
</p>
</div> <!-- cd-modal-content -->
</div> <!-- cd-modal -->
<div class="cd-modal-action">
<a href="#0" class="btn" data-type="modal-trigger">test-2</a>
<span class="cd-modal-bg"></span>
</div> <!-- cd-modal-action -->
<div class="cd-modal">
<div class="cd-modal-content">
<p>
Test2
</p>
</div> <!-- cd-modal-content -->
</div> <!-- cd-modal -->
<div class="cd-modal-action">
<a href="#0" class="btn" data-type="modal-trigger">test-3</a>
<span class="cd-modal-bg"></span>
</div> <!-- cd-modal-action -->
<div class="cd-modal">
<div class="cd-modal-content">
<p>
Test3
</p>
</div> <!-- cd-modal-content -->
</div> <!-- cd-modal -->
Je pense que c'est tout bête, mais je n'ai pas trouvé la solution :/
Merci pour votre aide,
E.
Afficher la suite