Bulma은 순수한 CSS 프레임 워크이며 JavaScript를 제공하지 않습니다. 즉, 사용자가 모달 외부를 클릭하거나 키보드에서 ESC
을 눌렀을 때 닫히지 않도록 할 경우 모달 구성 요소 (특히 카드 변형)가 닫히지 않도록 JavaScript를 추가하는 방법은 무엇입니까?사용자가 Bulma CSS 프레임 워크를 사용하여 모달을 사용하지 못하게하려면 어떻게해야합니까?
2
A
답변
2
예를 들어, 아마 그 행동을 코딩했을 것입니다. 벌마는 그것을 포함하지 않습니다. 모달을 활성화하려면 .modal 컨테이너에 is-active 수정자를 추가하기 만하면됩니다. 액티브 수정자를 직접 제거하지 않는 한, 모달은 열린 상태로 유지됩니다.
1
당신이 말했듯이, 벌마는 당신을 위해 어떤 j도 제공하지 않습니다. 따라서 모달의 닫기 이벤트를 처리하는 방법과 방법은 완전히 당신에게 달려 있습니다.
해당 버튼 중 하나가 클릭 될 때만 Modal이 닫힙니다.
1
당신이 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>
$(".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>
감사의 코드이다, 어떤 이유로 나는 그들이 그것을 작동 할 수 있도록하기 위해 데모 사이트에 자바 스크립트를 추가 한 고려하지 않았다. 테스트를 마친 후에는 모달 밖을 단순히 클릭해도 효과가 없다는 것을 알게되었습니다. CSS 자체에서 요즘 할 수있는 모든 일로 인해 CSS 만 사용한다고 가정했습니다. –
여기에는 모달 등의 좋은 옵션이 있습니다. https://buefy.github.io/#/documentation/modal 및 모든 Bulma CSS와 작동합니다. – Jordan