Sujet Précédent Sujet Suivant

Personnaliser les boites d'alerte

flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 - Modifié le 24 oct. 2022 à 13:59
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 - 24 oct. 2022 à 22:00

bonjour a tous

j'essaye de continuer a ameliorer mon site en php

cette fois je m'attaque aux boites alert qui sont definie par le navigateur et je souhaiterais les rendres plus ludiques

Dans mon exemple

j'ai mes sorties de epche et lorsque on clic sur un petit dessin on est redirige vers mon site wordpress apres une confirmation

cela fonctionne parfaitement

avec ce code mais cela utilise les fameuses alert du navigateur

         function confirmation12(e,lien){
           e = e || window.event;
           e.preventDefault(); // pour empecher le lien de se déclencher "normalement"
           if (confirm("Vous êtes sur le point d être redirigé pour visionner la sortie de pêche sur le nouveau site")) {
             alert("Il ce peux que la redirection prenne quelques secondes ");
             window.open(lien , '_blank');
           } else {
             alert("Vous ne serez donc pas redirigé");
             return false;
           }
         }

et le lien du bouton onclick

 <a class="button centre"  style="width: 100px;margin-bottom:10px;"  onclick="confirmation12(event,'<?php echo $donnees["guid"]; ?>')"><img src="https://phil.pecheperle.be/image/640.jpg" alt="pêche à la perle" /></a>

A voir également:

Personnaliser les boites d'alerte
Fr alerte c est quoi - Guide
Personnaliser menu démarrer windows 11 - Guide
Message alerte virus windows 10 ✓ - Forum Virus / Sécurité
Personnaliser numéro de page word - Guide
Personnaliser google maps - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478
24 oct. 2022 à 16:14

Bonjour,

Déjà .. ce n'est pas "Il ce peux .." mais... "il se peut "

Ensuite.. ce que tu veux, c'est simplement faire des fenêtres modals. Tu trouveras de nombreux exemples/tutos sur le net pour en faire toi même.

Il existe même des plugins prêts à l'emploi.. tel que, par exemple, https://sweetalert2.github.io/

.
Cordialement,
Jordane

flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173
24 oct. 2022 à 17:57

bonjour jodane

Merci pour la reponse et le lien tres interessant

Mais j'aurais prefere trouver une solution rien qu'avec du javascript

jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478 > flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023
24 oct. 2022 à 18:04

ben.. ce que je t'ai donné.. c'est du javascript ...

flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173 > jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023
24 oct. 2022 à 18:05

oui mais je dois embarquer encore des librairieis que je vais devoir tenir a l'oeil pour les mises a jour

Comme je te l'ai dit ...

Tu trouveras de nombreux exemples/tutos sur le net pour en faire toi même.

je vais essayer de trouver cela

flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173 > flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023
24 oct. 2022 à 20:26

je pense avoir trouve quelque chose mais j'ai un soucis pour la redirection avec le lien

car lorsque je clic sur le bouton ok dans le modal je souhaiterais que cela ouvre mon lien , mais bien evidement cela n'ouvre rien ...

pour rappel c'est un tableau avec a chaque fois un lien par sortie de peche

le lien est enferme dans

$donnees["guid"]

voici le code html du bouton

<button type="button" class="btn btn-primary" data-toggle="modal" onclick="openModal (event,'<?php echo $donnees["guid"]; ?>')">
    Open modal
  </button>

voici le code de la modal

           <div class="modal" id="myModal">
             <div class="modal-dialog">
               <div class="modal-content">
                 <!-- Modal body -->
                 <div class="modal-body"> Vous êtes sur le point d être redirigé pour visionner la sortie de pêche sur le nouveau site </div>
                 <div class="confirm-delete hide">
                   <div class="modal-header">
                     <h4 class="modal-title">Delete Confirmed</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                   </div>
                   <p>Il ce peux que la redirection prenne quelques secondes</p>
                   <div class="modal-footer1">
                     <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.href = 
						<?php echo $donnees["guid"];  ?>;">ok </button>
                   </div>
                 </div>

et le code de javascript

   function confirmDelete(){
  console.log("Deleting...");
  $('.modal-header, .modal-footer, .modal-body').addClass('hide');
  $('.confirm-delete').removeClass('hide');
  //$('#myModal').modal('hide');
}

function openModal(){
  $('.confirm-delete').addClass('hide');
  $('#myModal .modal-header, .modal-footer, .modal-body').removeClass('hide');
  $('#myModal').modal('show');
}

bon j'ai regler le soucis apresent lorsque je clic sur un lien cela ouvre bien ma sortie de peche sur wordpress

Mais lorsque je clic pour ouvrir ma modal box j'ai toujours le meme lien

voici mon code html

<div class="col-md-1" style="border: solid; text-align: center;">  <a class="button centre" style="width: 100px;margin-bottom:10px;" onclick="confirmation12(event,'<?php echo $donnees["guid"];  ?>')">
    <img src="https://phil.pecheperle.be/image/640.jpg" alt="pêche à la perle" />
  </a>
  <button type="button" class="btn btn-primary" data-toggle="modal" onclick="openModal (event,'')"> Open modal </button>
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal body -->
        <div class="modal-body"> Vous êtes sur le point d être redirigé pour visionner la sortie de pêche sur le nouveau site <?php var_dump( $donnees['guid']);  ?> </div>
        <div class="confirm-delete hide">
          <div class="modal-header">
            <h4 class="modal-title">Delete Confirmed</h4>
            <button type="button" class="close" data-dismiss="modal">×</button>
          </div>
          <p>Il ce peux que la redirection prenne quelques secondes</p> <?php var_dump( $donnees['guid']);  ?> <div class="modal-footer1">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.href = '
							<?php echo ( $donnees['guid']);  ?>', '_blank';">ok </button>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button class="btn btn-danger" onclick="confirmDelete()">Ok on y va</button>
        </div>
      </div>
    </div>
  </div>
  <!-- The Modal -->
</div>

et mon javascript

  function confirmDelete(){
  console.log("Deleting...");
  $('.modal-header, .modal-footer, .modal-body').addClass('hide');
  $('.confirm-delete').removeClass('hide');
  //$('#myModal').modal('hide');
}

function openModal(){
  $('.confirm-delete').addClass('hide');
  $('#myModal .modal-header, .modal-footer, .modal-body').removeClass('hide');
  $('#myModal').modal('show');
}

Personnaliser les boites d'alerte

1 réponse

Votre réponse

Newsletters