如何使布尔玛模态JQuery切换

Question

我正在尝试在我的网站上使用Bulma CSS框架中的模式。我能够从布尔玛的官方文档中获取代码，并在添加后检查布尔玛模态是否正常模态中的“活跃”类。因此，当我确实编写了一个用于切换模式的jQuery脚本时，我希望在单击按钮并能够再次将其关闭时将其打开，但是在运行代码时没有任何反应。我尝试检查语法，并且是否正确编写了ID和类，而且它们似乎都是正确的。

  $('#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>