웹 페이지 중앙에 JavaScript 팝업 Div 요소
이 튜토리얼 기사에서는 웹 페이지 중앙에 팝업 창을 여는 방법에 대해 설명합니다.
팝업은 기본 콘텐츠 위에 있는 창에서 열리는 작은 창 또는 작은 상자입니다. 팝업을 사용하는 주요 사용 사례는 전체 콘텐츠가 아닌 특정 정보에 초점을 맞추는 것입니다. 예를 들어 사용자에게 확인 메시지를 표시하는 것입니다. 또는 팝업을 모달이라고도 합니다.
HTML에서 팝업 스타일 지정
팝업의 스타일을 지정하는 방법은 기본 콘텐츠 위에 팝업을 표시하거나 적어도 기본 콘텐츠 위에 있다는 환상을 제공해야 하는 유일한 이유 때문에 중요합니다. 아래 예를 통해 이 작업을 수행하는 방법을 살펴보겠습니다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
}
.overlay {
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.popup {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
text-align: center;
background: white;
}
.popup h3 {
font-size: 15px;
height: 50px;
line-height: 50px;
color: #fff;
background: white;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay">
<div class="popup">
<div onclick="CloseModal()">✖</div> <!-- Shows Close Icon -->
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
따라서 이 간단한 예에서는 팝업을 표시하는 데 사용할 버튼을 만들었습니다.
그러나 가장 중요한 것은 모든 콘텐츠 위에 약간 검은색으로 표시되어 사용자가 해당 콘텐츠를 보기 어렵게 만드는 오버레이 요소가 있다는 것입니다.
우리는 팝업 요소를 생성하고 오버레이 요소 위에 그리고 웹 페이지 중앙에 오도록 스타일을 지정했습니다. 그렇게 함으로써 주요 콘텐츠를 숨길 수 있었습니다.
화면 중앙에 팝업이 열리면 사용자가 명확하게 볼 수 있는 유일한 항목이기 때문에 사용자의 주의를 끌 것입니다. 그러나 놓친 경우에 대비하여 오버레이 요소가 없음으로 설정되어 있으므로 지금 바로 표시됩니다.
따라서 질문은 팝업을 어떻게 전환합니까? JavaScript 또는 jQuery를 사용하여 그렇게 할 수 있습니다. 아래에서 두 가지에 대해 자세히 논의하겠습니다.
JavaScript에서 팝업 열기 및 닫기
JavaScript를 사용하여 팝업의 스타일 속성을 토글할 수 있습니다. DOM 요소에 액세스한 다음 style 속성에 액세스한 다음 display 유형을 none에서 block으로 변경하면 팝업이 표시됩니다. 위로. 마찬가지로 사용자가 닫기 아이콘을 클릭하면 다시 없음으로 변경할 수 있습니다. 예를 들어 이것을 살펴 보겠습니다.
function OpenModal() {
let element = document.getElementById('overlay')
element.style.display = 'block'
}
function CloseModal() {
let element = document.getElementById('overlay')
element.style.display = 'none'
}
jQuery를 사용하여 팝업 열기 및 닫기
또는 jQuery로 동일한 작업을 반복할 수 있습니다. 소스 코드와 필요한 변경 사항을 살펴보겠습니다.
function OpenModal() {
$('#overlay').show();
}
function CloseModal() {
$('#overlay').hide();
}
이 예제에서는 jQuery의 show 및 hide 메서드를 사용했습니다. 표시 속성을 없음에서 차단으로 변경하는 대신 표시는 요소에서 표시 속성을 제거하고 유사하게 숨기기는 디스플레이 속성을 없음으로 설정합니다. .
show는 display:none 또는 jQuery로 숨겨진 항목에서만 작동합니다. CSS의 visibility 속성과 작동하지 않습니다.또한 jQuery를 사용할 때 헤더에 jQuery CDN을 추가(또는 jQuery 패키지 설치)해야 합니다.