일단 토글이 아닌 개발자도구로 확인하게 되면
토글처럼 버튼을 클릭하게되면 div가 생성되었다가 body 또는 버튼을 다시클릭시
div 없어지는걸 구글에 뭐라고 검색해야할까요
"동적div"를 검색해보니 버튼 클릭시 div추가 관련내용만 나오네요
답변 5개 / 댓글 2개
답변에 대한 댓글 2개
모든분들께서 해주신 답변 정말 감사합니다.
소중한 답변 참고할께요!
기본 코딩 이해도만 있다면 별도의 프레임워크 없이 제이쿼리 하나만으로도
멋진 연출을 하실수 있습니다.
<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 을 구현하시면됩니다.
그냥 열고닫기 검색하면 쉽게 보실수 있습니다.
sinbi모달 (modal) 키워드로 구글링 해보세요.
답변을 작성하려면 로그인이 필요합니다.
개발자 도구로 확인했을때
기존에는 div 자체가 없었다가 버튼을 클릭하면 div가 활성화가 되었다가
또다시 버튼을 닫기 클릭하면 div가 비활성화로 변하는데요
위에 말씀해주신 부분을 적용하여 가능할까요?!