Discussion :

[isaric]

Bonjour,

Je souhaite ouvrir une fenêtre lorsqu'on arrive sur une page.

J'ai regardé https://dmouronval.developpez.com/tu...-css3/#noWhere

Et testé là : Test...4.php

Mais cela ne créer pas de fenêtre d'alert

Que faut-il faire ?

D'avance merci.

[mathieu]

regardez dans l'onglet réseau de la console de développement, vous verrez que l'url de la feuille de style n'est pas correct.
http://isaric.cof.free.fr/Test-s-isaric/isaric-4.php

[Doksuri]

salut, il y a plus simple pour faire une modale : utiliser la balise <dialog>...</dialog>. pourquoi ?
moins de prise de tete de divs en positions relatives/absolutes...
le "zindex" du dialog sera gere par le navigateur, et sera sytematiquement "par dessus" tout le site (plus besoin de faire des z-index:9999999 (pour etre par dessus les pubs a la noix)
c'est 1 ligne de JS pour ouvrir/fermer la dialog, et la validation d'un formulaire au sein du dialog fermera automatiquement la dialog (en plus d'envoyer les donnees comme d'habitude) (on pourra utilise un preventDefault pour empecher la fermeture si besoin).
quelques lignes simples de css pour gere la mise en forme de la dialog... et roulez jeunesse
bonus: sur pc, la touche "echap" ferme la dialog

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
<h1>modals !</h1>
<button class="open-modal" id="openModal">open modal</button>
<p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br />
<p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br /><p>lerem ipsum</p><br />
 
<dialog class="modal" id="modal">
    <h2>title</h2>
    <p>blabla</p>
    <form method="dialog">
        <input type="text"><br />
        <input type="submit" value="valid form">
    </form><br />
    <button class="close-modal" id="closeModal">close modal</button>
</dialog>

Code css :

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

1
2
3
4
5
6
7
8
.modal::backdrop {
  background-color: rgba(255, 0, 0, .1);
}
.modal {
  max-width: 50ch;
  border: 0;
  box-shadow: 0 2px .3rem 0;
}

Code js :

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

1
2
3
4
5
6
7
8
9
const modal = document.getElementById('modal');
const btnOpen = document.getElementById('openModal');
const btnClose = document.getElementById('closeModal');
btnOpen.addEventListener('click', () => {
    modal.showModal();
});
btnClose.addEventListener('click', () => {
    modal.close();
});

[isaric]

Merci mathieu et Doksuri

Je regarde pour l'instant le premier cas (sans java)

Comment ouvrir cette fenêtre sans bouton ?
Peut-elle s'ouvrir à l'arrivée sur la page sans bouton pour la déclencher ?

[isaric]

Sur Test419

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
<div>
    <label for="modalFenetre">Voir la fenêtre modale</label><input type="checkbox" id="modalFenetre" />
    <div id="fenetreMod">
        <div class="popup_block">
            <label for="modalFenetre"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="./img-test/close_pop.png" /></label>
            <img style="float: right; margin: 0 0 0 20px;" alt="image modal" src="./img-test/manutil.gif" />
            <h2>Popup</h2>
 
            <p>Texte 1 </p>
            <p>Texte 2</p>
 
        </div>
    </div>
</div>

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
#fenetreMod {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: rgba(0, 0, 0, 0.5); */
	background-color: #B8FAD0;
    z-index: 1000;
}
#modalFenetre {
    display: none;
}
#modalFenetre:checked + #fenetreMod {
    display: block;
}
 
.popup_block{
    /* background: #fff; */
    background: black; 
    color: white;
    padding: 20px;
    border: 20px solid #ddd;
    position: relative;
    margin: 10% auto;
    width: 40%;
    box-shadow: 0px 0px 20px #000;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
}

Mais il faut cliquer dessus pour l'ouvrir
J'aimerai que cela s'ouvre en arrivant sur la page.


J'ai testé Popup en CSS, sans Javascript sans réussir à le faire marcher

[NoSmoking]

Bonjour,

Mais il faut cliquer dessus pour l'ouvrir

Au chargement de ta page fait un

Code javascript :

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

1
2
3
document.getElementById("modalFenetre").checked = true;
// ou 
document.getElementById("modalFenetre").click();

ou plus simplement en checkant l'INPUT

Code html :

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

<input type="checkbox" id="modalFenetre" checked="checked" />

[isaric]

Merci NoSmoking