Is bootstrap modal working in magento 2? I have already added my code but it is not working. here is my code HTML:

<div class="button-addcart">
<button type="button" class="green-btn btn-add-cart d-block" id="button-cart" data-toggle="modal" data-target="#myModal">ADD TO CART</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Who's Attending?</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>

<!-- Modal body -->
<div class="modal-body">
<div style="text-align: center;" id="content">

<!-- Modal footer -->
<div class="modal-footer">
<a class="green-btn" href="#">PROCEED</a>


/*Modal for events registration*/
$(function() {
    $('#button-cart').click(function() {
        var count = $('.qty-text').val();
        var html = '';

        if (count < 1) {
            count = 1;

        for (var i = 0; i < count; i++) {
            var a = i + 1;
            html = html + '<p style="font-size:25px;text-align: left;"> Ticket ' + a + '</p> <br><div class="info-customer"><p> Email: <br><input class="customer-info" type="email" name="email" placeholder="Your Email" required> </p><p>First Name: <br><input class="customer-info" type="text" name="fname" placeholder="Your First name" required></p><p>Last Name: <br><input class="customer-info" type="text" name="lname" placeholder="Your Last name" required></p><form><input class="customer-gender" type="radio" name="gender" value="male" checked> Male<input class="customer-gender" type="radio" name="gender" value="female"> Female<input class="customer-gender" type="radio" name="gender" value="other"> Other</form><br><p class="customer-bday">Birthday:<br><input class="customer-bday" type="date" name="bday"></p> <p>Contact Number:<br><input class="customer-info" type="text" name="contactnumber" placeholder="Your Contact Number" required></p><p>Address:<br><input class="customer-info" type="text" name="addr" placeholder="Your Address" required></p></div>';
            if ( i < count) {
                html += '<hr>';


1 Answer 1


Yes bootstrap modal supported by magento 2.

<button type="button" class="action" data-trigger="trigger">
    <span data-bind="i18n: 'Click Here'"></span>
<div data-bind="mageInit: {
            'type': 'popup',
            'title': 'Popup title',
            'trigger': '[data-trigger=trigger]',
            'responsive': true,
            'buttons': [{
                text: $.mage.__('Submit'),
                class: 'action'
    <div class="content">
        Popup Content

Modal widget


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.