간단한 X(닫기)버튼 만들기

닫기 아이콘 Close icon

공지 및 경고와 같은 콘텐츠를 닫으려면 일반 닫기 아이콘을 사용합니다.

예

×

공지사항

공지 내용...

간단하게 onclick자바스크립트를 이용 만들어 보겠습니다. 물론 전 이것을 예전에 인터넷에서 보고 적은 것이라서 질문은 사양합니다.

밑의 html파일에 들어갈 부분입니다. css는 이문서 하단에 있습니다.

<div class="notice-box">
<span id='close' onclick="this.parentNode.style.display = 'none';">&times;</span>
<p>공지 내용</p>
</div>

위의 onclick에서 this.parentNode.style.display = 'none';값을 적으므로 .parentNode상위 부모 노드의 노드 이름을 가져오고 display = 'none';값을 입력해서 보여지지 않게 만드는 것입니다.

다른 예로

<div>  /* 1번째 */
<div> /* 2번째 */
<span onclick="this.parentNode.parentNode.style.display = 'none';">&times;</span>
<p>공지 내용</p>
</div>

위의것은 <div>가 2개 들어 가서 .parentNode를 2번 사용 하였습니다.

'x' 버튼을 클릭하면 1번째 <div>에 style="display: none;"문이 들어 가서 보이지 않는 것입니다.

만약 .parentNode문을 1개만 적었다면
즉) onclick="this.parentNode.style.display = 'none';" 이면

'x' 버튼을 클릭하면 2번째 <div>에 style="display: none;"문이 들어가서 보여지지가 않는 것입니다. 안보여 지는 것은 같지만 만약 클래스가 들어가 있다면 결과가 다르게 나옵니다.

---

css부분 #close부분의 몇가지만 빼고는 마음데로 하시면 됩니다.

밑의 것으 예제로 몇가지 적었습니다.

.notice-box {
  padding:10px;
  background-color:rgb(249, 250, 252);
  text-align:left; 
  margin-top: 5px;
}
.notice-box p {
  -webkit-margin-before: .3em;
  -webkit-margin-after: .5em;
}
#close {
  float:right;
  display:inline-block;
  padding:2px 5px;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff;
  font-size: 1.3rem;
}
#close:hover {
  border: 0;
  cursor:pointer;
  opacity: .75;
}