모달에서 버튼 닫기를 사용합니다.

Question

모달로 가까운 모달 버튼을 사용하려고했지만 작동하지 않습니다.

내 코드 : 작동하지만 두 번째 닫기 버튼 밖으로 모달이 작동하지 모달에

<center><button class="bleu b_modal">Modal test</button></center> 

<script type="text/javascript"> 

    $(".b_modal").click(function(e) { 
     e.preventDefault(); 
     modal.open({content: '\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '}); 
    }); 

    $('.b_close').click(function(e){ 
     e.preventDefault(); 
     modal.close(); 
    }); 

    var modal = (function(){ 
     var 
     method = {}, 
     $modal, 
     $content, 
     $close; 

     method.open = function(settings) { 
      $content.empty().append(settings.content); 
      $modal.show(); 
      document.body.style.overflow = "hidden"; 
     }; 

     method.close = function() { 
      $modal.hide(); 
      $content.empty(); 
      document.body.style.overflow = "auto"; 
     }; 

     $modal = $('<div id="modal"></div>'); 
     $content = $('<div id="modal_content"></div>'); 
     $close = $('\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '); 

     $modal.hide(); 
     $modal.append($content, $close); 

     $(document).ready(function(){ 
      $('body').append($modal); 
     }); 

     $close.click(function(e){ 
      e.preventDefault(); 
      method.close(); 
     }); 

     return method; 
    }()); 

</script> 

닫기 버튼을 클릭합니다. 문제는 내 $('.b_close').click이지만 아무 것도 시도하지 않았습니다.

modal.open({content: '\<center><button class="b_close">Close modal</button></center>\'}); 
$close = $('\<center><button class="b_close">Close modal</button></center>\'); 

들이는 HTML5에서 지원하지 않는, 중앙 태그를 제거

modal.open({content: '\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '}); 

Answer 1

이 라인은 문제가 될 것으로 보인다. 또한 백 슬래시 (\)를 제거하십시오. 끝에있는 문자가 실제로 이스케이프 처리되면서 문자열을 종료합니다.

$close = $('<button class="b_close">Close modal</button>'); 

그리고 단추를 .open() 메서드로 전달하지 않는 것이 좋습니다. 그냥 다음과 같이 호출하십시오 :

modal.open(); 

그런 다음 함수에서 var $ close를 사용하십시오.

var $close = $('<button class="b_close">Close modal</button>'); 

    method.open = function() { 
     $content.append($close); 
     $modal.show(); 
     document.body.style.overflow = "hidden"; 
    }; 

마지막으로 .open() 및 .close() 메소드에서 콘텐츠에 .empty()를 호출 할 필요가 없습니다. https://jsfiddle.net/0nxv597a/2/