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?