[백업] 간단한 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>

위의것은 <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;
}