How to turn on and off Bulma Model Jquery toggle attribute

Question

My Bulma CSS framework model element is not toggling on and off when I wanted it to. I made a function to add class "is-active" when I click on the show modal button but nothing happens. Also, there weren't any error messages.

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

works fine, can you reproduce your issue?

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