javascript - 如何打开和关闭布尔玛模型Jquery切换属性(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.(我的Bulma CSS框架模型元素在需要时不会切换。)

I made a function to add class "is-active" when I click on the show modal button but nothing happens.(当我单击显示模式按钮时，我做了一个添加类“ is-active”的函数，但没有任何反应。) 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>   ask by Sunchae Kim translate from so

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>