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?
4 answers
solution1
3 2019-11-08 08:15:59
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>
solution2
2 2019-11-08 08:19:27
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:
solution3
1 ACCPTED 2019-11-08 08:24:41
Just fix syntax errors and popup will work:
$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");
solution4
0 2019-11-08 08:08:47
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.