Home-theater-designers
잘 디자인된 팝업 창은 웹 사이트를 보다 인터랙티브하고 현대적으로 만듭니다. 그들은 시장을 창출하고 기업의 판매를 높일 수 있습니다.
HTML, CSS 및 JavaScript로 팝업 창을 만들 수 있습니다. 다음 가이드를 사용하여 처음부터 팝업 창을 만들고 스타일을 지정하세요. 그것은 귀하의 웹 사이트를 대화식으로 만들고 훌륭한 사용자 경험을 만듭니다.
테스트 앱 안드로이드에 대한 지불오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.
콘텐츠 구조화를 위한 HTML 작성
버튼을 클릭하면 나타나는 숨겨진 모달 창이 있는 HTML 코드를 작성해 보겠습니다. 이 경우 단어의 의미를 표시합니다. 안녕하세요! 팝업 창에는 제목과 일부 내용이 있습니다.
모달 창을 트리거하는 즉시 배경에 흐릿한 효과가 나타납니다. 나중에 JavaScript에서 모달을 선택하는 데 사용할 섹션에 클래스를 추가합니다.
<body>
<button class="open-modal">Hello!</button>
<div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
페이지는 다음과 같이 나타나야 합니다.
당신은 또한 조사하고 싶을 수 있습니다 HTML 대화 상자 요소 가장 시맨틱한 마크업을 사용하려는 경우. .
CSS를 작성하여 스타일 추가
CSS를 사용하여 팝업 창의 형식을 지정합니다. 창을 검은색 배경의 웹 페이지 중앙에 배치하여 명확하게 볼 수 있도록 합니다. 또한 창, 배경 및 글꼴 크기의 스타일을 지정합니다.
먼저 margin, padding, line-height를 설정하여 전체 페이지에 대해 균일한 스타일을 만듭니다. 그런 다음 뒷면 배경 중앙에 본문 요소를 정렬합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 30px;
}
다음으로 스타일을 오픈 모달 단추. 눈에 잘 띄도록 페이지의 나머지 부분과 다른 배경색을 지정합니다. 또한 글꼴 색상, 크기, 패딩 및 전환 시간을 설정합니다.
.open-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.open-modal:active {
transform: translateY(-17px);
}
그런 다음 창이 열릴 때 표시될 모달 콘텐츠의 스타일을 지정합니다. 흰색 배경을 설정하고 본문보다 너비를 작게 지정하고 패딩을 추가합니다.
또한 z-인덱스를 제공하여 오픈 모달 단추. 또한 다음을 설정합니다. 히든 모달 없음으로 표시되므로 트리거할 때까지 숨겨진 상태로 유지됩니다.
기본 Gmail 계정을 변경하는 방법
.modal-content {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}
.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
그런 다음 스타일 클로즈 모달 배경이 투명한 버튼을 중앙에 정렬합니다.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}
.close-modal:hover {
color: #fa5252;
}
마지막으로 창이 열릴 때 배경에 드리울 흐림 요소의 스타일을 지정합니다. 최대 높이와 너비 및 배경 필터가 있습니다. 흐림을 없음으로 설정하면 창이 열릴 때까지 보이지 않습니다.
.blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.hidden-blur {
display: none;
}
CSS를 추가한 후 페이지는 다음과 같아야 합니다.
JavaScript 코드로 팝업 제어
JavaScript를 사용하여 모달 창을 표시하거나 숨김으로써 열고 닫습니다. 추가하다 이벤트 리스너 버튼을 클릭하면 열리고 닫히도록 트리거합니다.
Windows 스토어에서 다운로드할 수 없습니다. Windows 10
먼저 HTML에서 정의한 CSS 클래스를 사용하여 관련 요소를 선택합니다.
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
에 이벤트 리스너를 추가합니다. 오픈 모달 버튼을 클릭하면 창이 열립니다.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
반대 작업을 수행하여 팝업 닫기를 처리하지만 이번에는 명명된 함수로 래핑합니다. 이것은 모달 창을 닫을 수 있는 여러 이벤트에 대한 동작을 처리합니다.
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
배경 또는 닫기 버튼 클릭과 사용자가 Esc 키를 누르는 경우를 처리하는 이벤트 리스너를 추가합니다.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
이제 다음을 클릭하면 안녕하세요! 버튼을 누르면 모달이 나타납니다. 창 오른쪽에 있는 취소 버튼을 클릭하여 닫을 수 있습니다. 코드 참조 codepen.io 모달과 상호 작용합니다.
팝업 창의 사용
웹 개발에서 팝업/모달 창의 주요 용도는 웹사이트의 특정 항목에 초점을 맞추는 것입니다. 일단 트리거되면 페이지의 나머지 부분을 비활성화하여 사용자에게 주의를 환기시킵니다.
팝업 창은 UI에 애니메이션을 적용합니다. 그들은 사용자를 위해 웹 페이지의 중요한 정보에 대해 경고하고 주의를 끌 수 있습니다. 창을 제거하려면 사용자가 어떤 작업을 수행해야 합니다. 이렇게 하면 사용자가 창과 상호 작용하고 의도한 정보를 얻을 수 있습니다.