Bootstrap modal for magento 2

Question

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>

Answer 1

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