팝업 만들기

10563 단어 htmljavascriptcss
코딩하는 동안 팝업 창은 대부분의 웹 사이트에 넣는 표준처럼 보였고 누구나 CSS 파일에 간단히 추가할 수 있을 것 같았습니다. 매일 웹사이트에 가입하고, 사진을 확대하고, 초점이 "전경"에 있는 무언가로 이동되는 다른 상황의 긴 목록을 만드는 방법입니다. 이 학습 과정을 시작하기 전에 다음과 같은 질문이 있었습니다. 페이지의 나머지 기능을 비활성화할 뿐만 아니라 완전히 덮는 요소를 추가하려면 어떻게 해야 할까요? 처음에는 특히 "z"축에 레이어링하는 것이 최선의 조치라고 생각했지만 읽어본 후 한 가지 옵션이 가장 간단해 보였습니다.

실제(짧은) 프로세스



실제로 DOM에 무엇을 표시하고 싶습니까? 첫 번째 레이어는 나중에 팝업에 더 많은 대비를 제공하기 위해 "본문"콘텐츠를 어둡게 하여 포커스를 해제하는 것으로 시작합니다.

<body>
   <div id="blur-cover">
      <div id="pop-up">

      </div>
   </div>
</body>


HTML 요소는 구체적이지 않으며 흐림 효과를 위한 "div"와 실제 콘텐츠를 위한 또 다른 요소를 포함합니다. 이벤트 리스너를 클릭하면 나타나는 창입니다.

몇 가지 품질로 "div"를 표시하는 첫 번째 스타일은 다음과 같습니다.

#blur-cover{
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7)
}
#pop-up{
   width: 500px;
   height: 300px;
   background-color: white;
}


이 선은 이제 반투명한 "div"인 배경 흐림 효과를 생성하여 여백 내에서 "div"의 배경을 어둡게 하고 적절한 크기의 단색 흰색 "div"를 전체 위에 오버레이합니다. 깊이를 보기 위한 필러 사진:



그런 다음 올바른 위치에 "div"를 배치하기 위한 추가 스타일이 제공됩니다.

#blur-cover{   
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
   position: fixed;
   top: 0;
   justify-content: center;
   align-items: center;
   display: flex;
}
#pop-up{
   width: 500px;
   height: 300px;
   background-color: white;
   border-radius: 15px;
   position: absolute;
}


이제 흰색 상자는 스크롤하는 동안에도 페이지 중앙에 있으며 배경은 "본문"요소의 어두운 버전입니다. #blur-cover의 "background-color"는 불투명도 값이 0.7인 "rgba"로 설정됩니다. "배경색"을 "검은색"과 같은 것으로 호출한 다음 "불투명도"를 0.7로 지정하면 작동하는 것처럼 보입니다. 그런 다음 "div"내의 모든 요소에 70%의 투명도를 적용합니다. 우리가 원하지 않는 팝업을 포함합니다.



CSS를 더 자세히 설명하기 위해 #blur-cover에는 이제 다음에 대한 속성이 있습니다.

   top: 0;
   justify-content: center;
   align-items: center;
   display: flex;


"top"은 요소를 페이지 상단에서 시작하도록 가져오고, "justify-content: center"는 자식 "div"를 페이지 중앙에 가로로 정렬하고, "align-items: center"는 자식을 세로로 정렬합니다. div"를 페이지 중간에 넣습니다. "display: flex"는 "div"를 중앙에 배치하기 위해 두 번째 및 세 번째 줄과 함께 작동합니다. 여기서 우리는 일반적으로 이 세 가지가 조합되어 요소를 중앙에 배치하는 것을 볼 수 있습니다.

#pop-up "div"의 위치를 ​​지정하기 위해 추가된 CSS는 흰색 상자 주위에 더 부드러운 가장자리를 만들기 위한 "border-radius"이고 상자를 정적으로 만드는 "position: absolute"와 같이 매우 간단하고 반미적입니다. 스크롤.

그런 다음 이벤트 리스너가 있는 버튼을 지정하여 클릭했을 때 실제로 팝업이 나타나도록 하고 팝업을 종료하는 방법도 지정해야 합니다.

X 만들기:

<div id="pop-up">
   <div id="close">+<div>
</div>


"x"는 대칭이 아니기 때문에 실제 "x"문자일 수 없습니다. 따라서 "+"로 대체할 수 있으며 45도 회전하고 팝업에 배치할 수도 있습니다.

#close{
position: absolute;
top: 0;
cursor: pointer;
font-size: 40px;
transform: rotate(45deg);
right: 14px;
}




더 진행하기 전에 "#blur-cover"속성을 하나 더 설정하여 기본 DOM에 팝업이 표시되지 않도록 해야 합니다.

display: none;


이것은 팝업 버튼 또는 "x"버튼을 클릭하는지 여부에 따라 "표시"값을 전환하는 이벤트 리스너의 전제가 됩니다.

document.getElementById('btn').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('#blur-cover').style.display = 'flex';
})

document.querySelector('#close').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('#blur-cover').style.display = 'none';
})


그런 다음 JavaScript의 첫 번째 몇 줄을 만들어 모든 버튼이 기능적으로 팝업이 나타나도록 합니다.

폐쇄



이것을 배우는 나의 주된 목표는 CSS를 향상시키는 것이었고, 내가 해결한 이 질문은 항상 내 마음 한구석에 있었습니다. 이를 통해 CSS 문제를 처리하는 방법도 개선되었으며, 적용 방법만 생각했다면 이전 경험과 지식으로도 이 작업을 수행할 수 있었음을 깨달았습니다. 항상 개선의 여지가 있습니다. 읽어 주셔서 감사합니다!
기술로의 나의 여정
Xcode8에서 iOS11beta 단말기의 동작을 확인하고 싶다 (iOS11 실제 기기 빌드하고 싶다)Could not locate device support files.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage