如果用戶在其外部單擊時如何防止模式（使用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>