Je souhaite afficher une fenêtre contextuelle lorsque l'utilisateur clique sur un bouton.

Voici le code html:

function showPopup() {
  $("#popUp").before('<div id=grayBack></div>');

  var popupH = $("#popUp").height();
  var popupW = $("#popUp").width();

  $("#popUp").css("margin-top", "-" (popupH / 2 40)
    "px");
  $("#popUp").css("margin-left", "-" popupH / 2 "px");

  $("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
    $("#popUp").fadeIn(500);
  });
}

function hidePopup() {
  $("#grayBack").fadeOut('fast', function() {
    $(this).remove()
  });

  $("#popUp").fadeOut('fast', function() {
    $(this).hide()
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="buttons">
    <input id="buttonHoroquartz" type="button" value="Button" onclick="showPopup();">
  </div>
  <div id="popUp">
    <h3>Pop up</h3>
    <p>Hello !</p>
    <p></p>
    <input type="button" value="Ok" onclick="hidePopup();">
  </div>
</body>

Je n'ai aucune erreur mais quand je clique sur le bouton, rien ne s'ajoute et je ne sais pas pourquoi. Avez-vous une idée?

1
MissKnacki 8 nov. 2019 à 11:02

4 réponses

Meilleure réponse

Il suffit de corriger les erreurs de syntaxe et le popup fonctionnera:

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");
1
Roman Bobrik 8 nov. 2019 à 08:24

Ce qui suit ne fonctionnera pas en raison de sa syntaxe:

$("#popUp").css("margin-top", "-" (popupH / 2 40) "px");
$("#popUp").css("margin-left", "-" popupH / 2 "px");

Cela devrait être quelque chose comme:

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

Voilà pourquoi

$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
  $("#popUp").fadeIn(500);
});

n'est jamais appelé.

(Notez le +)

Exemple de travail avec mon propre CSS:

function showPopup() {
  $("#popUp").before('<div id=grayBack></div>');

  var popupH = $("#popUp").height();
  var popupW = $("#popUp").width();

  //$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
  //$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

  $("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
    $("#popUp").fadeIn(500);
  });
}

function hidePopup() {
  $("#grayBack").fadeOut('fast', function() {
    $(this).remove()
  });

  $("#popUp").fadeOut('fast', function() {
    $(this).hide()
  });
}
#popUp {
  display: none;
  width: 200px;
  height: 200px;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

#grayBack {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, .4);
  z-index: 10;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
  <input id="buttonHoroquartz" type="button" value="Button" onclick="showPopup();">
</div>
<div id="popUp">
  <h3>Pop up</h3>
  <p>Hello !</p>
  <p></p>
  <input type="button" value="Ok" onclick="hidePopup();">
</div>
3
J. Sadi 8 nov. 2019 à 08:38

Je veux juste noter que la balise <dialog> peut être utilisée, bien que les navigateurs qui la prennent en charge soient, à ce jour, Chrome et Opera, en plus de certains navigateurs pour appareils mobiles.

À mon avis, <dialog> deviendra la norme pour les "popups" et les "fenêtres modales".

Référence:

2
Andrew 8 nov. 2019 à 08:19

Essayez (pas de jquery)

toggle = q => document.querySelector(q).classList.toggle('hide');
body { margin: 0; padding: 0; }

.btn {
  padding: 10px;  
  background: #BADA55;
  border-radius: 5px;  
  cursor: pointer
}

.popupBg { 
  position: absolute;
  top: 0;
  left: 0;
  display: flex; 
  min-height: 100vh; 
  width: 100vw; 
  justify-content: center; 
  align-items:center; 
  background: rgba(255,0,0,0.5) 
}

.popup {
  width: 100px;
  min-height: 200px;
  border: 1px solid black;
  background: #88f;
  margin: 40px;
}

.hide { display: none; }
<div class="example">Some content</div>

<div class="btn" onclick="toggle('.popupBg')">PopUP</div>

<div class="popupBg hide" onclick="toggle('.popupBg')" >
    <div class="popup" onclick="event.stopPropagation()" >
      My popup
    </div>
</div>
0
Kamil Kiełczewski 8 nov. 2019 à 08:08