Display Pop up with Javascript and HTML

Question

I want to display a pop up when user click on a button.

Here is the html code :

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>

I don't have any error but when I click on button, nothing append and I don't know why. Do you have any idea?

you have at least syntax errors. "-" (popupH / 2 40) "px" won't work — Roman Meyer
– Roman Meyer, Commented Nov 8, 2019 at 8:05
Indeed I have this error. I didn't see it until now beacause another part of my code was blocking errors. — MissKnacki
– MissKnacki, Commented Nov 8, 2019 at 8:14
Side note: You should use a more commonly accepted internet image format such as jpeg or png, bitmaps are very large and unpractical. — MiK
– MiK, Commented Nov 8, 2019 at 8:17

jsadev.net · Accepted Answer · 2019-11-08 08:38:28Z

3

The following will not work because of its syntax:

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

It should be something like:

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

Thats why

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

is never called.

(Note the +)

Working example with my own 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>

edited Nov 8, 2019 at 8:38

answered Nov 8, 2019 at 8:15

jsadev.net

2,6001 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fdomn-m Over a year ago

It's right there: $("#popUp").before('<div id=grayBack></div>');

MissKnacki Over a year ago

The problem came from the syntax. Thank you for your help !

Andrew · Accepted Answer · 2019-11-08 08:19:27Z

2

I just want to note that the <dialog> tag can be used, although the browsers that support it are, to date, Chrome and Opera, in addition to some browsers for mobile devices.

In my opinion <dialog> will become the standard for "popups" and "modal windows".

Reference:

answered Nov 8, 2019 at 8:19

Andrew

3833 silver badges15 bronze badges

Comments

Roman Meyer · Accepted Answer · 2019-11-08 08:24:41Z

1

Just fix syntax errors and popup will work:

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

answered Nov 8, 2019 at 8:24

Roman Meyer

2,9122 gold badges22 silver badges29 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-11-08 08:08:47Z

0

Try (no 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>

answered Nov 8, 2019 at 8:08

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

2 Comments

jsadev.net Over a year ago

I think it will be better if you face her problem instead of delivering an other solution. Otherwise it will be a "copy paste solution" without learning effect.

MissKnacki Over a year ago

Thank you for the help, indeed it works ! However I fixed my original code with other answers.

Collectives™ on Stack Overflow

Display Pop up with Javascript and HTML

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related