मेरा बुल्मा सीएसएस ढांचा मॉडल तत्व जब मैं चाहता था तब चालू और बंद नहीं हो रहा था। जब मैं शो मोडल बटन पर क्लिक करता हूं तो मैंने कक्षा "सक्रिय-सक्रिय" जोड़ने के लिए एक फ़ंक्शन बनाया है लेकिन कुछ भी नहीं होता है। साथ ही, कोई त्रुटि संदेश नहीं थे।

  $('#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>
0
Sunchae Kim 30 अक्टूबर 2019, 17:23

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/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>
0
Ivan Karaman 30 अक्टूबर 2019, 14:35