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