如果用户在其外部单击时如何防止模式（使用Bulma CSS框架）关闭？

Question

Bulma是一个纯粹的CSS框架，不提供JavaScript。话虽如此，如果用户在模式外单击或者在键盘上点击ESC时阻止模式组件（特别是卡变体）被关闭，我该如何去关闭？

Answer 1

在该示例中，他们可能编码了该行为。布尔玛不包括它。要激活模式，只需在.modal容器上添加is-active修饰符。只要你自己不移除主动修饰符，模态将保持打开状态。

Answer 2

正如您所说，宝马不会为您提供任何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>

Answer 3

既然你写的JS自己，只删除模态类当您单击要触发关闭模式的关闭按钮，或不管它是什么。

下面是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>