사용자가 버튼을 클릭하면 팝업을 표시하고 싶습니다.
다음은 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");
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다