모달창 닫기 버튼 질문

모달창 닫기 버튼 질문

QA

모달창 닫기 버튼 질문

본문

인터넷 뒤적여가며 모달을 만들고 있는대 a태그에 이미지 넣어서 모달을 띄워주는 버튼을 만들었는대

거기다가 닫기 버튼 기능을 넣어버리니까 누름과 동시에 열렸다가 바로 닫혀버리는대

한번누르면 열리고 다시한번 누르면 닫히게 하려면 어떻게 하면되니요?


<style>
#modalLayer{display:none; position:relative;}
#modalLayer .modalContent{width:250px; height:200px; padding:20px; border:1px solid #ccc;z-index:11; background:#fff;overflow:auto;}
</style>
<script>
$(document).ready(function(){
  var modalLayer = $("#modalLayer");
  var modalLink = $(".modalLink");
  var modalClose = $(".modalClose");
  var modalCont = $(".modalContent");
  var marginLeft = modalCont.outerWidth()/2;
  var marginTop = modalCont.outerHeight()/2; 
  modalLink.click(function(){
    modalLayer.fadeIn("slow");
    modalCont.css({"margin-top" : '10px'});
    $(this).blur();
    $(".modalContent > a").focus(); 
    return false;
  });
  modalLink.click(function(){
    modalLayer.fadeOut("slow");
    modalLink.focus();
  });        
});
</script>

<a href="#modalLayer" class="modalLink"><img src="abcd.png"></a>
<div id="modalLayer">
  <div class="modalContent">
  모달내용
  <div>
  </div>

이 질문에 댓글 쓰기 :

답변 4


$(document).ready(function(){
  var modalLayer = $("#modalLayer");
  var modalLink = $(".modalLink");
  var modalClose = $(".modalClose");
  var modalCont = $(".modalContent");
  var marginLeft = modalCont.outerWidth()/2;
  var marginTop = modalCont.outerHeight()/2; 
  modalLink.click(function(){
    modalLayer.fadeToggle("slow");
    modalCont.css({"margin-top" : '10px'});
    $(this).blur();
    $(".modalContent > a").focus(); 
    return false;
  });      
});

 

fadeToggle기능을 사용하세요

같은 항목(modalLink)에 대한 클릭 이벤트가 두 번 작성되어 있어 열리는 이벤트 한 번/닫히는 이벤트 한 번이 연속으로 실행된 듯합니다.

위에서 코드 작성해주신 것처럼 fadeToggle 기능을 이용하시면 열려있을 경우 닫힘/닫혀있을 경우 열림으로 작동하게 됩니다.

fadeIn fadeOut두개로 나누지 마시고 fadeToggle로 click이벤트를 한번만 사용하셔서 짜보시면 좋을것같네요

https://codepen.io/ww9603/pen/KKgVdOV 코드팬으로 대충 예시를 만들어봣는대 이미지를 한번 누르면 모달창이 뜨고 한번 더누르면 닫히게 만드려고합니다.

지금은 이미지를 누르면 뜨자마자 바로 닫혀버립니다.

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

회원로그인

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