11528 sujets

JavaScript, DOM et API Web HTML5

Comment remplacer les alert du navigateur par des modals

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 peches 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
si l'utilisateur le desire il peux empecher que cela s'ouvre
je souhaiterais donc pouvoir remplacer ce code par du pur javascript
qui pourrait m'aider svp

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


       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;
           }
         }
j'ai fini par trouver un systeme mais mon var_dump de $donnees["guid"]
est toujours le meme des que j'ouvre ma modal

<div class="col-md-1" style="border: solid; text-align: center;">  <?php var_dump( $donnees['guid']); //is ok ?>
  <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">&times;</button>
          </div>
          <p>Il ce peux que la redirection prenne quelques secondes</p> <?php var_dump( $donnees['guid']);//is not ok  ?> <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>


  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');
}
Bonjour
Merci pour l'aide , les liens et la reponse
Je viens de trouver la solution voici ce que j'ai fait 

       .sign-in-pecheperle
  {
    background-image: url('https://phil.pecheperle.be/image/640.jpg');
    width: 35px;
height: 33px;
    background-repeat: no-repeat;
   /* background-position: -9px -7px;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;*/
  }
      button.btn-primary{
  /*position: fixed;*/
  top: 50%;
  left: 50%;
  /*margin-top: -50px;
  margin-left: -100px;*/
}

.hide{
  display: none; 
}

.show{
  display: block;
}


code html

  <button type="button centre" class="btn btn-primary sign-in-pecheperle" data-toggle="modal" onclick="openModal (event)"></button>
  
  
  <!-- The Modal -->
  <div class="modal" id="myModal1">
  
    <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 se peut 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']);  ?>','_blank'">ok </button>-->
            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="window.open('<?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-success" onclick="confirmDelete()">Ok on y va</button>
        </div>
      </div>
    </div>
  </div>
  <!-- The Modal -->
</div>


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

      function openModal(eve){
  $('.confirm-delete').addClass('hide');
  $(eve.target).next().modal('show');
  $(eve.target).next().find('.modal-header, .modal-footer, .modal-body').removeClass('hide');
}
Meilleure solution
Sujet clos
Aller à