如何打开和关闭布尔玛模型Jquery切换属性

Question

我想要的时候，我的Bulma CSS框架模型元素不会切换。当我单击显示模式按钮时，我做了一个添加类“ 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/[email protected]/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>