如果用户点击它以外，如何阻止模式（使用Bulma CSS框架）关闭？

Question

Bulma是一个纯CSS框架，不提供JavaScript。 话虽这么说，如果用户点击模态外部或者如果他们在键盘上按ESC键阻止它关闭，我将如何添加JavaScript以防止模态组件（特别是卡变体）被关闭？

Answer 1

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

Answer 2

如你所说，bulma不会为你提供任何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，因此只有在单击关闭按钮时才删除模态类，或者您想要触发关闭模态的任何内容。

这是来自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> 

Answer 4

最简单的方法是不使用他们的“内置”背景，只为第一个模态div设置背景颜色。 我通过这样做在我的React应用程序中解决了这个问题：

<div style={{ backgroundColor : 'rgba(0,0,0,0.86)'}} id="modal-image-detail" className="modal modal-fx-superScaled">

然后我从第二个div中删除了className =“modal-background”