CODEWITHSUNDEEP
javascriptjqueryhtml
MissKnacki
MissKnacki

Reputation: 279

Display Pop up with Javascript and HTML

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?

Upvotes: 1

Views: 1970

Answers (4)

jsadev.net
jsadev.net

Reputation: 2590

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>

Upvotes: 3

Roman Meyer
Roman Meyer

Reputation: 2872

Just fix syntax errors and popup will work:

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

Upvotes: 1

Andrew
Andrew

Reputation: 383

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:

Upvotes: 2

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92677

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>

Upvotes: 0

Related Questions