如何打开和关闭 Bulma 模型 Jquery 切换属性

Question

我的 Bulma CSS 框架模型元素没有在我想要的时候打开和关闭。当我点击显示模式按钮但没有任何反应时，我做了一个添加 class "is-active" 的函数。此外，没有任何错误消息。

  $('#showModal').click(function(){
    $('.modal').addClass('is-active');
});
$('.modal-close').click(function(){
    $('.modal').removeClass('is-active');
});


    <!-- Message-->
        <article class="message is-link is-vcentered">
            <div class="message-body">
                <p class="is-size-4">Eg text</p>
                <br>
                <button class="button is-link" id="showModal">Clic</button>
            </div>
        </article>

            <!--MODAL -->
            <div class="modal">
                <div class="modal-background"></div>
                <div class="modal-content">
                    <h3>Hello world</h3>    
                </div>
                <button class="modal-close is-large" aria-label="close"></button>
            </div>

Answer 1

工作正常，你能重现你的问题吗？

$(document).ready(() => {
  const modal = $('.modal');
  $('#showModal').click(function(){
    modal.addClass('is-active');
});
$('.modal-close').click(function(){
    modal.removeClass('is-active');
});
});

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- Message-->
        <article class="message is-link is-vcentered">
            <div class="message-body">
                <p class="is-size-4">Eg text</p>
                <br>
                <button class="button is-link" id="showModal">Clic</button>
            </div>
        </article>

            <!--MODAL -->
            <div class="modal">
                <div class="modal-background"></div>
                <div class="modal-content">
                    <h3>Hello world</h3>    
                </div>
                <button class="modal-close is-large" aria-label="close"></button>
            </div>

如何打开和关闭 Bulma 模型 Jquery 切换属性

How to turn on and off Bulma Model Jquery toggle attribute

javascript

jquery

html

css

bulma