답변 5개 / 댓글 2개
채택된 답변
+20 포인트
기본 코딩 이해도만 있다면 별도의 프레임워크 없이 제이쿼리 하나만으로도
멋진 연출을 하실수 있습니다.
<div id="test" style="width:100px; height:100px; background:#fff100;"></div>
<input type="button" onclick="testdiv();" value="토글">
<script type="text/javascript">
function testdiv(){
if($('#test').css('display') == 'none'){ // div 안보일때
$('#test').css('display','block'); // 보이기
} else if($('#test').css('display') == 'block'){ // div 보일때
$('#test').css('display','none'); // 숨기기
}
}
</script>
버튼 하나로 해당 test div 의 상태에 따라 css 변화를 줄수 있습니다.
body 클릭시 사라지게 구현하려면
2개의 div 를 띄우시고
하나는 fixed 형태로 width:100% height:100% 속성을 주신다음
해당 div 클릭시 display:none 을 구현하시면됩니다.
답변을 작성하려면 로그인이 필요합니다.
개발자 도구로 확인했을때
기존에는 div 자체가 없었다가 버튼을 클릭하면 div가 활성화가 되었다가
또다시 버튼을 닫기 클릭하면 div가 비활성화로 변하는데요
위에 말씀해주신 부분을 적용하여 가능할까요?!