버튼 클릭시 div생성 및 닫기

버튼 클릭시 div생성 및 닫기

QA

버튼 클릭시 div생성 및 닫기

본문

일단 토글이 아닌 개발자도구로 확인하게 되면 

토글처럼 버튼을 클릭하게되면 div가 생성되었다가 body 또는 버튼을 다시클릭시 

div 없어지는걸 구글에 뭐라고 검색해야할까요 

 

"동적div"를 검색해보니 버튼 클릭시 div추가 관련내용만 나오네요

이 질문에 댓글 쓰기 :

답변 5

http://robinparisi.github.io/tingle/

bootsrap등을 사용하시지 않으신다면 그냥 modal로스만 있는 

사용이 간편한 소스 입니다.

감사합니다.

개발자 도구로 확인했을때
기존에는 div 자체가 없었다가 버튼을 클릭하면 div가 활성화가 되었다가
또다시 버튼을 닫기 클릭하면 div가 비활성화로 변하는데요

위에 말씀해주신 부분을 적용하여 가능할까요?!

기본 코딩 이해도만 있다면 별도의 프레임워크 없이 제이쿼리 하나만으로도

멋진 연출을 하실수 있습니다.

 

833268658_1565291262.913.png

 

<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 을 구현하시면됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,134 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT