IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Page modal ou alert à l'arrivée sur une page


Sujet :

CSS

  1. #1
    Membre du Club Avatar de isaric
    Profil pro
    Inscrit en
    janvier 2009
    Messages
    103
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2009
    Messages : 103
    Points : 51
    Points
    51
    Par défaut Page modal ou alert à l'arrivée sur une page
    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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 906
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 906
    Points : 13 730
    Points
    13 730
    Par défaut
    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

  3. #3
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 224
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 224
    Points : 4 067
    Points
    4 067
    Par défaut
    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();
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Membre du Club Avatar de isaric
    Profil pro
    Inscrit en
    janvier 2009
    Messages
    103
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2009
    Messages : 103
    Points : 51
    Points
    51
    Par défaut
    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 ?

  5. #5
    Membre du Club Avatar de isaric
    Profil pro
    Inscrit en
    janvier 2009
    Messages
    103
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2009
    Messages : 103
    Points : 51
    Points
    51
    Par défaut
    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

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 037
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 037
    Points : 40 694
    Points
    40 694
    Par défaut
    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" />

  7. #7
    Membre du Club Avatar de isaric
    Profil pro
    Inscrit en
    janvier 2009
    Messages
    103
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2009
    Messages : 103
    Points : 51
    Points
    51
    Par défaut
    Merci NoSmoking

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] php / mysql - Pas d'alerte d'erreur sur une requette poutant érroné!
    Par Didier100 dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 27/09/2015, 11h08
  2. .txt pour arriver sur une carte
    Par thierry57680 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 23/02/2011, 15h54
  3. arriver sur une nouvelle page après login
    Par polo86 dans le forum ASP.NET
    Réponses: 4
    Dernier message: 18/04/2009, 19h34
  4. [PHP 5.2] Récupérer les images qui arrivent sur une adresse email
    Par 4rocky4 dans le forum Langage
    Réponses: 1
    Dernier message: 02/02/2009, 11h16
  5. [VBA-E] afficher un ALERT en cliquant sur une case d'excel
    Par Argorate dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 07/08/2006, 05h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo