Как заставить Bulma Modal JQuery переключаться - PullRequest
Новая
       12

Как заставить Bulma Modal JQuery переключаться

0 голосов
/ 30 октября 2019

Я пытаюсь использовать модал от Bulma CSS Framework на моем сайте. Я смог получить код из официальной документации Bulma и проверил, работает ли модальный режим Bulma после того, как я добавил класс is-active к модальному. Поэтому, когда я написал сценарий jQuery для переключения модального режима, и я ожидаю, что он включится, когда я нажму кнопку, и смогу снова его отключить, но ничего не произойдет, когда я запущу код. Я попытался проверить синтаксис, и если я правильно написал свои идентификаторы и классы, и все они казались правильными. 

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

1 Ответ

0 голосов
/ 30 октября 2019

отлично работает, вы можете воспроизвести вашу проблему? 

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