[英]How can I prevent a modal (using the Bulma CSS framework) from closing if the user clicks outside of it?
Bulma is a pure CSS framework and does not provide JavaScript. Bulma是一个纯CSS框架,不提供JavaScript。 That being said, how would I go about adding JavaScript to prevent the modal component (specifically the card variant) from being closed if a user clicks outside of the modal or preventing it from closing if they hit
ESC
on their keyboard? 话虽这么说,如果用户点击模态外部或者如果他们在键盘上按
ESC
键阻止它关闭,我将如何添加JavaScript以防止模态组件(特别是卡变体)被关闭?
In the example, they probably coded that behaviour. 在该示例中,他们可能编码了该行为。 Bulma does not include it.
布尔玛不包括它。 To activate the modal, just add the is-active modifier on the .modal container.
要激活模态,只需在.modal容器上添加is-active修饰符。 As long as you don't remove the is-active modifier yourself, the modal will stay open.
只要您不自行删除is-active修饰符,模态将保持打开状态。
As you said, bulma does not provide any js for you. 如你所说,bulma不会为你提供任何js。 So, if and how you handle the close event of the modal is completely on you.
那么,你是否以及如何处理模态的关闭事件完全取决于你。
Something like this would close the Modal only if one of the corresponding buttons gets clicked. 只有当其中一个相应的按钮被点击时,这样的东西才会关闭模态。
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>
Since you have to write the JS yourself, only remove the modal classes when you click the close button or whatever it is you want to trigger closing the modal. 由于您必须自己编写JS,因此只有在单击关闭按钮时才删除模态类,或者您想要触发关闭模态的任何内容。
Here's the code from the bulma docs 这是来自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>
The easiest thing to do is not use their "built-in" background and just set a background color for the first modal div. 最简单的方法是不使用他们的“内置”背景,只为第一个模态div设置背景颜色。 I got around it in my React app by doing this:
我通过这样做在我的React应用程序中解决了这个问题:
<div style={{ backgroundColor : 'rgba(0,0,0,0.86)'}} id="modal-image-detail" className="modal modal-fx-superScaled">
and then I deleted the className="modal-background" from the second div 然后我从第二个div中删除了className =“modal-background”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.