사용자가 Bulma CSS 프레임 워크를 사용하여 모달을 사용하지 못하게하려면 어떻게해야합니까?

Question

Bulma은 순수한 CSS 프레임 워크이며 JavaScript를 제공하지 않습니다. 즉, 사용자가 모달 외부를 클릭하거나 키보드에서 ESC을 눌렀을 때 닫히지 않도록 할 경우 모달 구성 요소 (특히 카드 변형)가 닫히지 않도록 JavaScript를 추가하는 방법은 무엇입니까?

Answer 1

예를 들어, 아마 그 행동을 코딩했을 것입니다. 벌마는 그것을 포함하지 않습니다. 모달을 활성화하려면 .modal 컨테이너에 is-active 수정자를 추가하기 만하면됩니다. 액티브 수정자를 직접 제거하지 않는 한, 모달은 열린 상태로 유지됩니다.

Answer 2

당신이 말했듯이, 벌마는 당신을 위해 어떤 j도 제공하지 않습니다. 따라서 모달의 닫기 이벤트를 처리하는 방법과 방법은 완전히 당신에게 달려 있습니다.

해당 버튼 중 하나가 클릭 될 때만 Modal이 닫힙니다.

Answer 3

당신이 JS를 직접 작성해야하기 때문에

var modal = document.getElementById('modal'); 
 
    var elements = document.getElementsByClassName('toggle-modal'); 
 
    for (var i = 0; i < elements.length; i++) { 
 
    elements[i].addEventListener('click', toggleClass); 
 
    } 
 

 
    function toggleClass() { 
 
    modal.classList.toggle('is-active'); 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"/> 
 
    
 
    
 
    <button class="toggle-modal">Open Modal</button> 
 
    <div class="modal" id="modal"> 
 
    <div class="modal-background"></div> 
 
    <div class="modal-card"> 
 
     <header class="modal-card-head"> 
 
     <p class="modal-card-title">Modal title</p> 
 
     <button class="delete toggle-modal"></button> 
 
     </header> 
 
     <section class="modal-card-body"> 
 
     <!-- Content ... --> 
 
     </section> 
 
     <footer class="modal-card-foot"> 
 
     <a class="button is-success toggle-modal">Save changes</a> 
 
     <a class="button toggle-modal">Cancel</a> 
 
     </footer> 
 
    </div> 
 
    </div>

만 모달 클래스를 제거 당신은 당신이 모달을 닫는 트리거 할 닫기 버튼 또는 무엇이든 그것이를 클릭 할 때.

여기 the bulma docs

$(".modal-button").click(function() { 
 
    var target = $(this).data("target"); 
 
    $("html").addClass("is-clipped"); 
 
    $(target).addClass("is-active"); 
 
}); 
 

 
$(".modal-close").click(function() { 
 
    $("html").removeClass("is-clipped"); 
 
    $(this).parent().removeClass("is-active"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"> 
 

 
<!-- modal button --> 
 
<p> 
 
    <a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a> 
 
</p> 
 

 
<!-- modal content --> 
 
<div id="modal" class="modal"> 
 
    <div class="modal-background"></div> 
 
    <div class="modal-content"> 
 
    <div class="box"> 
 
     <article class="media"> 
 
     <div class="media-left"> 
 
      <figure class="image is-64x64"> 
 
      <img src="http://bulma.io/images/placeholders/128x128.png" alt="Image"> 
 
      </figure> 
 
     </div> 
 
     <div class="media-content"> 
 
      <div class="content"> 
 
      <p> 
 
       <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small> 
 
       <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. 
 
      </p> 
 
      </div> 
 
      <nav class="level"> 
 
      <div class="level-left"> 
 
       <a class="level-item"> 
 
       <span class="icon is-small"><i class="fa fa-reply"></i></span> 
 
       </a> 
 
       <a class="level-item"> 
 
       <span class="icon is-small"><i class="fa fa-retweet"></i></span> 
 
       </a> 
 
       <a class="level-item"> 
 
       <span class="icon is-small"><i class="fa fa-heart"></i></span> 
 
       </a> 
 
      </div> 
 
      </nav> 
 
     </div> 
 
     </article> 
 
    </div> 
 
    </div> 
 
    <button class="modal-close"></button> 
 
</div>