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

• Niket: Can you please help me here? magento.stackexchange.com/q/294109/68281