我想在用户单击按钮时显示一个弹出窗口。
这是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>我没有任何错误，但是当我点击按钮时，没有任何附加内容，我不知道为什么。你有什么想法吗？
最佳答案
由于其语法，以下内容将不起作用:
$("#popUp").css("margin-top", "-" (popupH / 2 40) "px");
$("#popUp").css("margin-left", "-" popupH / 2 "px");
应该是这样的:
$("#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.
(注意 +)
使用我自己的 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>关于javascript - 使用 Javascript 和 HTML 显示弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58762652/