0

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>
</div>
<!-- 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>
</div>

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

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

JS

<script>
/*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>';
            }
        }

        $('#content').html(html);
    });
});
</script>
0

Yes bootstrap modal supported by magento 2.

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

Modal widget

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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